When you go and play a video on our site the youtube video container goes down and a part of the video is cut from the top.
See http://laughpot.com/a-terryfying-world-record-on-a-bike-must-watch/
I recently added few CSS to make the video description look nicer and this is happening since I did that.
I even removed my custom CSS but the video is still cutting.
Can anyone please inspect the video div using Chrome developer tools and figure it out which CSS class or rule is causing this issue? I tried to find it but I got no success.
I will be very thankful!
Try this set this css on
1.) iframe {height:473px;} and
2.) set display:none for class yesp-title
output get like this
There is a top that is causing this problem on the element itself the video class="video-stream html5-main-video" within the class="html5-video-container"
top: 101.25px;
To resolve this issue, more elegantly you can use fitvid jQuery library
http://fitvidsjs.com/
WP plugin is also available for fitvids.
https://wordpress.org/plugins/fitvids-for-wordpress/
Related
I'm using Firefox and I have noticed a simple problem that when I'm using a image slider sometimes images overflow out of their container to the top. But it's only happening when I'm using Firefox on Chrome everything works fine, any ideas?
I have tried adding overflow:hidden, but it didn't help in this case.
If this is only happening on certain browsers it might be because you haven't done a reset on your CSS values.
You might want to check out this post and see if you're facing the same issues. If so you could add a reset.css file to your project to fix the problems. For more information, please check out CSS Reset.
I am trying to place an mp4 video into the background of a web page, with a container sitting on top displaying the page's content.
The video obscures everything though, even though I have the z-index set on the video css and on the bootstrap container
snippet - https://bootsnipp.com/user/snippets/Q0jbX
Is there a step I am missing?
I worked it out and updated the snippet https://bootsnipp.com/user/snippets/Q0jbX with the answer for anybody experiencing the same.
I added a class that had position:relative in it, and included it in the container, that solved my problem.
I am having a problem on youtube videos. Other elements(LayerSlider) is overlapping on top of it. This is the link (http://havencab.com.au/). To see the bug, click that link and try to make to video fullscreen.
I came across to the below link
YouTube Video Embedded via iframe Ignoring z-index?
but that didnt solve. Are there any other ways to fix this ?
Putting z-index: 0; on .ls-wp-fullwidth-container appears to fix the issue. I'm not certain why this is, maybe someone else could explain what is happening.
It might also be helpful to know that the you can open the inspect element mode while in full screen (in chrome at least) using Ctrl+Shift+C on windows
I want to add overlay hotspots on a html5 video which will help me give info about that video. I was able to successfully add it on HTML5 Video's normal mode. But, when i change the video mode to fullscreen, it disappears. Want someone to help me please!!!.
The best way to do this is to have a <div> containing the <video> and hotspots, and request fullscreen on the containing <div>.
I implemented the fullscreen and (parts of the) <video> APIs in Firefox. This z-index hack isn't the specified behaviour, so it will stop working once we update our implementation to match the latest draft of the W3C fullscreen spec.
This can be solved with a trick. Have a look on this example here:
http://jsfiddle.net/carmijoon/pZbkX/show/
z-index: 2147483647;
You can also see the code here:
http://jsfiddle.net/carmijoon/pZbkX/
z-index: 2147483647;
you need to add maximum value of z-index which is (z-index: 2147483647;) in to the overlay element. That trick will solve your issue.
Can you also share your file on jsfiddle?
I've been trying to add a swf over a swf on a html page, it's working fine in Firefox, but in IE, the one that's added first is always on top of the other one. I used z-index but it's not working, does anyone know how to solve this? Thanks.
I already added wmode:transparent, it is working in firefox but not in IE 6.
Add wmode=transparent to your movie parameters.
Use a background iframe...Here is a nice jquery plugin to handle it for you.
In order for z-index to work on a given element in a page, this element must be positioned with position: absolute or position: relative. You also need to set the wmode parameter to transparent to allow the browser to position the flash content below other elements in a page.