HTML video with css position fixed and background-attachment fixed on chrome
31,213
I think your z-index on the video may be causing issues. Try putting it behind. JS Fiddle
.sleep-video {
left: 0;
top: 0;
position: fixed;
width: 100%;
z-index: -20;
}
Comments
-
Mathew over 3 years
I have a video with position fixed and a couple of div with background-attachment fixed. Everything works fine in firefox and IE but with chrome, the background images don't display well.
HTML:
<video class="sleep-video" 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"> </video> <div class="section one"></div> <div class="section two"></div> <div class="section three"></div>
CSS:
body, html { padding: 0; margin:0; height: 100%; } .section { width: 100%; height: 100%; background-attachment: fixed; background-size: 100% 100%; position: relative; background-color: white; z-index: 2; } .section.one, .section.three { background-image: url(http://www.maximumpc.com/files/u160391/chrome_0.png); } .section.two { background: none; } .sleep-video { left: 0; top: 0; position: fixed; width: 100%; z-index: 1; }
I absolutely need to have background-attachment fixed for the images because my site use parallax effects. Currently, the workaround that I use is to hide the video when I don't need it but it's far from ideal.
-
Mathew about 10 yearsThanks! Also had to put -webkit-transform: translateZ(0); for better performance.
-
Gavin Wood almost 9 yearsThis is no solution, the background-attachment scrolls and it is not fixed as is requested.