Menu
Other browsers are OK, but only in chrome, video plays on top, ignoring z-index.
Following is code, and it looks strange in Chrome.
There is absolutely positioned 'IUView_4', but it shows under the video.
What's wrong in Chrome? Is there any way to handle?
<style>
#Page {background-color : rgb(255,255,255); position : relative; z-index : 0; width : 100.0%; margin : auto; height : 1300.0px; }
#Movie {background-color : rgb(0,198,245); top : 94.0px; z-index : 0; width : 521.0px; left : 131.0px; height : 242.0px; }
#View {height : 70.0px; width : 100.0px; background-color : rgb(0,164,89); z-index : 1; top : 62.0px; overflow : hidden; left : 435.0px; position:absolute; }
</style>
<body >
<div>
<div id='Page' >
<div id='Movie' >
<video width=100% height=100% poster='res/gazzetta_thumbnail.png' autoplay>
<source src="http://www.sketchin.ch/en/wp-content/themes/Sketchin2013/assets/video/page-home/gazzetta.mp4" type="video/mp4">
<object data="http://www.sketchin.ch/en/wp-content/themes/Sketchin2013/assets/video/page-home/gazzetta.mp4" width="100%" height="100%" /> </object>
</video>
</div>
<div id='View' >
</div>
</div>
</div>
</body>
814
We had a similar issue on our site, and implemented the fix described in this stack overflow page.
In our case, we added the following CSS to a relatively positioned overlay (rather than a fixed position element described in the link above), which kept disappearing behind the video:
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
On Google Chrome 64, this did the trick:
audio, video { position:relative; z-index:-1; }
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
