HTML5 video ignoring z-index
On your overlay/menu element, use:
backface-visibility: hidden;
This worked for me. My guess is that it triggers 3d rendering on the element, which eliminates the z-index problem.
The overlay also needs to be a sibling of the video. It will not work if the video is a child of the overlay.
Works:
<div id="container">
<div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;">
</div><!-- end #overlay -->
<video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div><!-- end #container -->
Dosen't Work:
<div id="container">
<div id="overlay" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:20;">
<video id="video" style="width:100px; height:100px; position:absolute; top:20px; left:20px; z-index:10;">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div><!-- end #overlay -->
</div><!-- end #container -->
I've only tried this in Chrome so apologies if this isn't universally true.
Use css position:absolute
property to both elements which overlaps and try to give values higher than 0
to the z-index
Here is working jsFiddle example.
css:
#main_container { float: left; position: relative; left:0; top:0; }
#video { position: absolute; left: 0px; top: 0px; min-height: 100%;
min-width: 100%; z-index: 9997; }
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
z-index: 9998; }
html:
<div id="main_container">
<div id="overlay"></div>
<video id="video" width="" height="" controls="controls" loop="loop" autoplay="">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</div>
Note: Used overlay div for deactivate controls and you can use whatever content on your video, like in jsFiddle example.
Source: Video as background on a website playing on command