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);

Answer 1

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()