How to always keep a div over HTML5 video?

Question

Basically I need to overlay a div over my HTML 5 video.

I Googled, and found the solution would be to set the div z-index value to maximum. So, I did but the problem is with Firefox. When ever the video goes to full screen in Firefox my div goes below video not over it.

http://codepen.io/anon/pen/GNaEKL I've made this link, You can test it in Firefox and click on that green box in it and see the result by yourself.

var video_con=document.getElementById("video_container");
    
document.getElementById("flscrn").addEventListener("click",function(){
  alert("hi");
  if (video_con.requestFullscreen) {
   video_con.requestFullscreen();
 } else if (video_con.mozRequestFullScreen) {
     video_con.mozRequestFullScreen();
 } else if (video_con.webkitRequestFullscreen) {
   video_con.webkitRequestFullscreen();
 }
});

.pofvv{
 position:relative;
 width:100%;
 height:100%;
 background:black;
 z-index:1;
}
.vid{
 position:absolute;
 height:60px;
 width:100%;
 bottom:0px;
  top:50%;
 background: white;
   z-index:2147483647;
}
.flscrn{
  position:absolute;
  height:30px;
  width:130px;
  background:green;
  color:white;
  text-align:center;
}

<div class="video_container">
  <video class="pofvv" id="pofvv" controls>
     <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  </video>
  <div class="vid">
      <div class="flscrn" id="flscrn"> full screen </div>
  </div>
</div>

You could do [this](http://codepen.io/anon/pen/XNweOR).. but I'm not fully sure what you're going for — adriancarriger, Dec 24 '16 at 18:38
Have you looked at [this answer](http://stackoverflow.com/a/18602389/870729)?' — random_user_name, Dec 24 '16 at 18:39
@adriancarriger I said to overlay the div not to use browser standard controls — akdsfjakls, Dec 24 '16 at 18:46

score 1 · Answer 1 · answered Dec 25 '16 at 09:18

After squandering days of my life on this problem, I found that there is not functionality yet to overlay an element over full screened video in firefox (reason: their employees don't care about there company).

But what we could do is to request the div containing the video to full screen and then we can overlay any element over that video.

var video_con = document.getElementById("div_containing_video");

$('.enter_fullscreen_btn').click(function(){
    if (video_con.requestFullscreen) {
        video_con.requestFullscreen();
    } else if (video_con.mozRequestFullScreen) {
        video_con.mozRequestFullScreen();
    } else if (video_con.webkitRequestFullscreen) {
        video_con.webkitRequestFullscreen();
    }
});

 $('.exit_fullscreen_btn').click(function(){
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
});

score 0 · Answer 2 · answered Dec 24 '16 at 19:54

0

You need to use h.264 encoded video. right now video is not suppoted by firefox.

answered Dec 24 '16 at 19:54

Prashant Suthar

368
1
5

How to always keep a div over HTML5 video?

2 Answers2