HTML5-видео, игнорируя z-index

Так вот что я пробовал до сих пор:

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

У меня есть фиксированное меню, и когда меню над видео, видео просто игнорирует z-index. Im в настоящее время работает на хромированных окнах без везения. Любые идеи?

Ответы

Ответ 1

Используйте css position:absolute свойство для обоих элементов, которые перекрываются, и попытайтесь дать значения, превышающие 0 z-index

Вот рабочий пример jsFiddle.

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>

Примечание. Используется оверлейный div для деактивации элементов управления, и вы можете использовать любой контент в вашем видео, как в примере с jsFiddle.

Источник: видео в качестве фона на сайте, играющем по команде

Ответ 2

Наложение также должно быть братом видео. Он не будет работать, если видео является дочерним наложением.

Работает:

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

Я только пробовал это в Chrome, так что извиняюсь, если это не универсально.

Ответ 3

В вашем оверлее/элементе меню используйте:

backface-visibility: hidden;

Это сработало для меня. Я предполагаю, что он запускает 3D-рендеринг на элементе, что устраняет проблему z-index.