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
Related
I have a video element that’s working beautifully with the standard controls in Safari (OS X 10.11 - El Capitan). I have play / pause, the scrubber, captions, and even AirPlay. …but there’s no full screen button. I swear I’ve seen that button on the normal controls before. The WebKit blog even has a screenshot with the button in an unrelated article (backdrop-filter is rad though, check it out).
Is this seriously not standard functionality?
I’ve added fullscreen to the video and source tags and even fullscreen="fullscreen" for good measure. The controls tag is working (I see the controls after all).
iOS’ controls are visually different and include the full screen button.
I’ve been hunting around and the most popular thing I can find is this super old StackOverflow article that basically says I need to use Javascript. That doesn't seem right. I feel like I’m taking crazy pills!
I suppose this could explain why so many sites roll their own controls using the JS hooks but it seems like a lot of work for expected functionality.
I realize I’m just asking for a ding in my pitiful reputation but I hope I’ve just missed something obvious.
Thank you in advance for your help / downvotes. :)
I was in a panic over the problem until I discovered that a <video> contained in a "popup window" instead of a regular window/tab is will cause the <video> tag to drop the fullscreen button in its controls.
My "page preview" happened to be launched in a pop-up window, and having maximized that, it took me a while to eliminate various factors before concluding that it was a popup vs. normal window/tab issue.
The behaviour that I experienced was in Chrome. I haven't tried it with other browsers.
Additionally: Also, note that within IFRAME also behaves the same way, dropping the fullscreen button, too (from the comments).
I figured this out, it was at least half stupidity.
Heading
I had the video element set to use max-width: 100% so it would fill the container on the page. I didn't think that would have any effect on the video's ability to go full screen.
No Metadata
The video didn't have any metadata to preload in the first place. I used an app to add a title to the file.
Does the fullscreen toggle button show up when you start playing the video?
According to Apple's documentation:
The webkitSupportsFullscreen property is not valid until the movie metadata has loaded. You can detect when the metadata is loaded by installing an event listener for the loadedmetadata event.
It seems there is some support in the video file that needs to be checked for before fullscreen support is enabled in the controls.
When viewing an HTML5 video on both Chrome and Safari, the fullscreen toggle button doesn't appear until the video has started playing.
EDIT: you might be able to get around this behavior by adding preload="metadata" to your video element.
So i put up a video on our page http://playgrounddistribution.com
It worked like a charm, until i scrolled down and saw that the image behind the "ABOUT US" section doesn't show until i select it with cmd+a or resize the window. This is rather annoying because the text is white so if the background isn't there you can't read it.
At first i thought the video loaded before the image, so i tried only loading metadata, but that didn't solve the problem. Then i figured it must be the cache, but disabling the cache didn't solve it either. Then i noticed selecting it or resizing the window did the trick, but that isn't optimal for our customers. It only seems to occur in Chrome. Have any of you experienced this problem before or should i include the css?
Screenshots here: http://imgur.com/a/xARmi
Thanks in advance!
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/
I have created a website but when i navigate form one menu to another a White flash screen is showing. I google for it but not found the solution. Please help me. Its showing in all browser specially in IE9. Please help me if there any solution for it.
It generally happens when it is loading the next page. If the loading time is more, the white page remains longer. This is a natural behavior of IE and is not-unusual in other browsers too
I have a site (link below) where the clients work displays on a long horizontal page. The menu is fixed on the left hand side and the images disappear under the menu when scrolling across.
The client has now uploaded quicktime movies which do not go under the menu like the images but scroll over the menu.
http://www.calebchurchill.com/projects/horny_dog/
I have tried to sort this using z-index but am so far been unsuccessful.
Any ideas?
See here - are you facing the same problem?
The OP there finally went on to use RealPlayer instead, hope it helps you...
Try this
Quicktime video appearing over Fixed DIV
They use special quicktime params to make the Quicktime Player use the stackorder.
I haven´t tested it myself because its not exactly my solution, but it might help you, if you can access the embedding code of the player.