Geek Answers Handbook

How to make DIV visible over HTML5 fullscreen video?

My ultimate goal right now is to have a message appear at the top of the video when the video has reached the end. Using the JW Players function, I determined how to get the link when the video is completed, but only in the standard view. If the user watches the video in full screen, the link does not appear. I did an extensive reading and realized that when it is in full screen mode, the video is in flash mode, and I cannot redefine the flash functions without integrating the link into the swf file, which I do not want to do.

I did to remove the full-screen button in the JW Player using the skin. Then I created a button to display the video in full screen using HTML5 full screen features. (I understand that IE will not work with this ... this is normal now). I can also create a full-screen state change event listener so that my link appears on top of the video. But that does not work.

No matter how I style the DIV that contains the link, it does not appear on top of the video.

Can someone point me in the right direction?

Thanks for any help anyone can give me.

Code example:

#container{ position:relative; z-index:0; } #overlay { visibility:hidden; width: 700px; height:50px; color:#FFF; position: absolute; top: 532px; margin:8px; padding:5px; background-color:#000; text-align:center; } #overlayfullscreen{ visibility:hidden; text-align:center; color:#FFF; font-size:26px; z-index: 1000; position: absolute; top: 800px; margin:8px; padding:5px; overlay:hidden; } <div id="container"> Loading the player, if not working please update your browser. </div> <button onClick="goFullscreen('container'); return false">Click for Fullscreen</button> var path = '<?php echo $video_path ?>'; jwplayer("container").setup( { autostart: <?php echo $autostart ?>, file: "<?php echo $full_video_path ?>", height: <?php echo $height ?>, width: <?php echo $width ?>, skin: '<?php echo $skin ?>', events: { onComplete: function(){ document.getElementById('overlay').style.visibility = 'visible'; } } }); document.addEventListener("mozfullscreenchange", function () { document.getElementById('overlayfullscreen').style.visibility = 'visible'; }, false);
+4
source share
3 answers

The problem is that the video is displayed absolutely . You can make your position: absolute link, and that should do it.

+1
source

This is a simple trick, you need to add the maximum z-index value, which is (z-index: 2147483647;) to the overlay element. This trick will solve your problem.

 z-index: 2147483647;

Here is your updated script: http://jsfiddle.net/TcpX5/36/

+13
source

I installed a small demo, I am using HTML5 video, not Flash Player, but the behavior should be the same: http://jsfiddle.net/sandro_paganotti/TcpX5/

To switch full screen mode, I suggest using screenfull ( https://github.com/sindresorhus/screenfull.js ), which basically handles the small differences between Firefox and Chrome.

Here's the code, just replace the <video> element with a JW Player implementation:

HTML

 <div id="video"> <video width="100%" src="yourmovie.webm" controls></video><br/> <button>go full screen</button> <a href="#">Special link</a> </div>

CSS

 #video{ position: relative; } a{ position: absolute; top: 10px; right: 10px; border: 1px solid red; display: block; background: #FFF }

Javascript

 $('button').click(function(){ screenfull.request(); });

Last note: jsfiddle prohibits full-screen mode (source: https://webapps.stackexchange.com/questions/26730/can-full-screen-mode-be-activated-in-jsfiddle ) to see the demo you must manually configure jsfiddle iframe using chrome devtools or firebug as mentioned in the link above.

+1
source

More articles:


All Articles