position:fixedp {
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
Content...
Content...
Content...