20

So this is what i tried so far:

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

I have a fixed menu and when the menu is over the video , the video just seem to ignore the z-index. Im currently working on chrome windows with no luck. Any ideas?

Rayees AC
  • 4,426
  • 3
  • 8
  • 31
Waymas
  • 423
  • 1
  • 5
  • 22

3 Answers3

22

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

Community
  • 1
  • 1
Barlas Apaydin
  • 7,233
  • 11
  • 55
  • 86
  • 1
    I know it will sound crazy, but at least on Chrome and iOS Safari it does not always work: the only solution i found was to put the elements AFTER the video tag, in the html. – taseenb Aug 26 '15 at 10:28
  • 1
    This issue doesn't occur anymore. If you think you face it, check other options first (for me was it background:transparent in .css) – Lis Jan 06 '18 at 21:00
3

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.

Henrik Christensen
  • 524
  • 5
  • 14
  • This was driving me crazy for a minute trying to find the reason two items in the same container (video + article) weren't stacked in document order. For me, adding `z-index: 100` to both fixed it. The z-index took precedence over the 3d rendering stacking context. – Simon_Weaver Jul 28 '21 at 16:49
1

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.

faber123
  • 11
  • 2