My goal is to design a single-page website with multiple sections, each featuring a video that spans the height and width of the viewport (100vh and 100vw). These videos should stack on top of each other, filling the entire browser window. While I've come across tutorials suggesting the use of position fixed for responsiveness, I don't want the videos to act as background in all sections. Is there a way to achieve this without using position absolute, which doesn't maintain full width and height when resizing?
I'm looking for a solution where the responsive video sections remain intact without breaking or overflowing when the browser is resized.
Edit:
Below is my HTML code snippet:
<section class="section1">
<video id="videoBG" autoplay muted loop>
<source src="style/vid/1_first.mp4" type="video/mp4">
</video>
</section>
<section class="section2">
<video id="videoBG2" autoplay muted loop>
<source src="style/vid/2_second.mp4" type="video/mp4">
</video>
</section>And here's the CSS portion:
section {
height: 100vh;
}
.section1 #videoBG, .section2 #videoBG2 {
position: fixed;
z-index: -1;
}
/* Making videos responsive for various screen sizes */
@media (min-aspect-ratio: 16/9) AND (min-aspect-ratio: 8/5) AND (min-aspect-ratio: 4/3) AND (min-aspect-ratio: 3/2){
.section1 #videoBG, .section2 #videoBG2{
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) AND (max-aspect-ratio: 8/5) AND (max-aspect-ratio: 4/3) AND (max-aspect-ratio: 3/2) {
.section1 #videoBG, .section2 #videoBG2 {
width:auto;
height: 100%;
}
}