CODEWITHSUNDEEP
jqueryhtmlcssfirefoxvideo
akdsfjakls
akdsfjakls

Reputation: 208

How to always keep a div over HTML5 video?

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>

Upvotes: 1

Views: 648

Answers (2)

akdsfjakls
akdsfjakls

Reputation: 208

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

Upvotes: 1

Prashant Suthar
Prashant Suthar

Reputation: 387

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

Upvotes: 0

Related Questions