How do I make a DIV visible on top of an HTML5 fullscreen video?

Question

My ultimate goal right now is to have a link appear on top of video when the video has reached the end. Using the JW Players functionality I have determined how to have the link appear when the video is complete but only in standard view. If the user views the video in fullscreen the link does not appear. I have done extensive reading and understand that when it is in fullscreen mode the video is in flash and I cannot override the flash functions without integrating the link into the swf file, which I do not want to do.

What I have done is to remove the fullscreen button in the JW Player video player using a skin. Then I created a button to display the video in fullscreen using the HTML5 fullscreen functionality. (I understand that IE will not work with this...that is fine for now). I am also able to create a fullscreen state change event listener so that my link will appear on top of the video. But it does not work.

No matter how I style the DIV which holds the link it does not appear on top of the video.

Can someone point me in the right direction?

Thank you for any help that 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);

Solution 1

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

Solution 2

It's a simple trick, you need to add the maximum value of z-index which is (z-index: 2147483647;) in to the overlay element. That trick will solve your issue.

z-index: 2147483647;

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

Solution 3

I've set up a small demo, I'm using an HTML5 video, not a Flash Player, but the behaviour should be the same: http://jsfiddle.net/sandro_paganotti/TcpX5/

To toggle fullscreen I suggest using screenfull (https://github.com/sindresorhus/screenfull.js) that basically handles the small differences between Firefox and Chrome.

Here's the code, just substitute the <video> element with your 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();
});

A final note: jsfiddle disallow the fullscreen mode (source: https://webapps.stackexchange.com/questions/26730/can-full-screen-mode-be-activated-in-jsfiddle) to see the demo you have to manually tweak jsfiddle iframe using chrome devtools or firebug as specified in the link above.

Solution 4

HTML:

<div id="wrapper">
  <a>element I want to be visible in full screen mode</a>
  <video ...>
</div>

JS:

const wrapper = this.document.getElementById('wrapper')
wrapper.requestFullscreen()

This code will typically be executed within a button click. All elements inside the wrapper will now be visible in full screen mode. You may need to apply different styling to your elements in full screen mode. e.g. you may want to make the video width or height 100%

Use this to know whether you are in full screen mode or not:

document.onfullscreenchange = () => {
  this.isFullScreen = !!document.fullscreenElement
}

Use this to exit fullscreen mode:

document.exitFullscreen()

View more solutions