How do I make a DIV visible on top of an HTML5 fullscreen video?
css, fullscreen, html
Solution
The problem is that the video is being displayed `absolutely`. You can make your link have `position: absolute` and that should do it.
Problem
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); ```