Parallaxed Video using CSS position:fixed


p { position:relative; z-index:1; background-color:#ffffff; } .parallaxed-video { height:30vh; /* Adjust this as desired */ position:relative; overflow:hidden; } .parallaxed-video > video:only-child { pointer-events:none; height:100vh; width:100vw; object-fit:cover; position:fixed; top:0; left:0; z-index:-1; }


<div class="parallaxed-video"> <video loop autoplay muted preload disablepictureinpicture="true" controlslist="nodownload" poster="butterfly-nithin-poster.jpg"> <source src="butterfly-nithin-480p.mp4" type="video/mp4" media="all and (max-width:900px)"> <source src="butterfly-nithin-720p.mp4" type="video/mp4" media="all and (max-width:1400px)"> <source src="butterfly-nithin-1080p.mp4" type="video/mp4"> Your browser doesn't support the HTML5 video tag. </video> </div>

The fixed position parallaxed video should appear in a block element below this one. However, it spills out and appears wherever there isn't an element of higher CSS z-index covering it. The entire document must be given an opaque CSS background and higher z-index for the effect to work properly. Not a very effective solution.

Video by Nithin PA from Pexels