.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;
}
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);
// You can also call this in an "onload" event listener, or at the end
// of your document to position the video before the document has
// scrolled.
for (let x = 0; x < parallaxVideos.length; x++) {
parallaxVideos[x].parallaxScrollPosition();
}
<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...