html - Video tag at Chrome overlays on top -
other browsers ok, in chrome, video plays on top, ignoring z-index.
following code, , looks strange in chrome.
there absolutely positioned 'iuview_4', shows under video.
what's wrong in chrome? there way 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>
we had similar issue on our site, , implemented fix described in stack overflow page.
in our case, added following css relatively positioned overlay (rather fixed position element described in link above), kept disappearing behind video:
-webkit-backface-visibility: hidden; -webkit-transform: translatez(0);
Comments
Post a Comment