Parallaxed Video Example

CSS:

.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:absolute; top:0; left:0; }

Javascript:

let parallaxVideos = document.querySelectorAll('.parallaxed-video > video:only-child'); for (let x = 0; x < parallaxVideos.length; x++) { parallaxVideos[x].parallaxScrollPosition = function() { this.style.top = -this.parentNode.getBoundingClientRect().top + 'px'; }; } window.addEventListener('scroll', function() { for (let x = 0; x < parallaxVideos.length; x++) { parallaxVideos[x].parallaxScrollPosition(); } }, false);

HTML:

<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>

Video by Nithin PA from Pexels

Content...

Content...

Content...