video HTML5 ignorando z-index

Question

Quindi questo è quello che ho provato finora:

<div id="video" style="position:absolute;margin-top: 231px;margin-left: 127px;"> 

        <video width="520" height="390" style="z-index:-10;"> 
         <source src="m/video.ogv" type="video/ogg"> 
         <source src="m/video.mp4" type="video/mp4"> 
        </video> 

</div> 

Ho un menù fisso e quando il menu è sopra il video, il video appena sembrano ignorare lo z-index. Attualmente sto lavorando su finestre cromate senza fortuna. Qualche idea?

Answer 1

Usa CSS position:absolute proprietà per entrambi gli elementi che si sovrappone e cercare di dare valori superiori 0 al 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> 

Nota: usato div overlay per i controlli di disattivazione ed è possibile utilizzare qualsiasi contenuto del video, come nell'esempio jsFiddle.

Fonte: Video as background on a website playing on command

Answer 2

La sovrapposizione deve essere anche un fratello del video. Non funzionerà se il video è figlio dell'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 --> 

non dovesse funzionare:

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

ho provato solo questo in Chrome in modo scuse se questo non è universalmente vero.