HTML5 video ignorując z-index

Question

Więc to, co starałem dotąd:

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

Mam ustalone menu i gdy menu jest na filmie, film po prostu wydają się ignorować z-index. Im obecnie pracuje na chrome windows bez powodzenia. Jakieś pomysły?

Answer 1

użyć CSS position:absolute nieruchomość do obu elementów, które pokrywają się i starają się dać wartości powyżej 0 do 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> 

Uwaga: Używany nakładki div do dezaktywowania formantów i można użyć dowolnej treści na wideo, np. W przykładzie jsFiddle.

Źródło: Video as background on a website playing on command

Answer 2

Nakładka musi również być rodzeństwo wideo. Nie będzie działać, jeśli wideo jest dzieckiem nakładki.

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

nie robi Praca:

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

Próbowałem to tylko w Chrome, więc przeprosiny, jeśli to nie jest uniwersalnie prawdziwe.