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?
You set z-index on a static element By default, every element has a position of static. z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
css("z-index", ''); Extract from the documentation : Setting the value of a style property to an empty string — e.g. $('#mydiv'). css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .
Yes: use position:relative; z-index:10 . z-index has no effect for position:static (the default).
Z-index is a CSS property that allows you to position elements in layers on top of one another. It's super useful, and honestly a very important tool to know how to use in CSS. Unfortunately, z-index is one of those properties that doesn't always behave in an intuitive way.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With