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?
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.
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 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
Just wondering if anyone knows any tricks to getting regular html content (mainly an img tag) to display on top of a video (via the video tag)?
As others have intimated it's very easy to position HTML elements on top of VIDEO elements using absolute positioning. The challenge comes when you try to capture events on them in the iPhone, iPod and possibly older Android phones that don't play video assets inline on the page (as opposed to in a thin native playback client) since in those instances the VIDEO element greedily captures events.
If you use an IMAGE element or a DIV with its background-image set to an image you want to use as a "poster" or "thumbnail" then your users won't be able to tap on them to get the video to start playing -- the mobile browser will treat this behavior as if nothing but the VIDEO element exists in that space (good if you happen to click in the middle where the "big play" button is but not so helpful if you, say, have a custom control not in the middle.
The solution I've used in the past is to just put the IMG or DIV poster on the page where you would normally put the VIDEO element and shift the VIDEO element offscreen (absolutely positioned with left style set to, say, -3000px) so it can no longer hoard those events.
I know this isn't exactly what was asked, but hopefully this information will prove useful to someone.
You can simply put html elements on top of HTML5 video by positioning them absolutly on top of the video. Give both the video element and the HTML element a "position:absolute" and put the HTML element a z-index higher than the video element's.
Why not use the poster attribute? That way you can display an image until the video is loaded or play.
Can you set the video as background for that div? Not sure if it would work for your layout, but it seems logical...
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.