Here's a snippet of my HTML pseudocode:
<div>
<VideoAnimation />
<div className="under-animation">
// a lot of content goes here
</div>
</div>
The issue arises from using absolute positioning on the VideoAnimation component, which takes up 100vh in height. This causes it to be taken out of the document flow. To position the under-section right below the animation as if it were relatively positioned, I also set it to absolute position starting from top: 100vh. However, this resulted in an unexpected behavior where I could not scroll through the page properly - only horizontal scrolling worked, while vertical scrolling was disabled on the mousepad. This issue did not occur with relative positioning. Thank you for any insights!
This is how my VideoSection component looks like:
import React, {Component} from 'react';
render() {
return (
<div className="video__container">
<video autoPlay muted className="myVideo">
<source
src="https://res.cloudinary.com/da0fiq118/video/upload/c_scale,h_600/v1538825517/animation.mp4" type="video/mp4" />
</video>
</div>
);
}
}
export default VideoAnimation;
And here's the SCSS file:
.video {
&__container {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
}
.myVideo {
display: block;
height: auto;
left: auto;
max-width: none;
min-height: 100%;
min-width: 100%;
right: auto;
position: absolute;
top: 0;
width: auto;
z-index: 1;
}
@supports (transform: translateX(-50%)) {
.myVideo {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
@media screen and (min-aspect-ratio: 16/9){
.myVideo {
max-width: 100vw;
min-width: 100vw;
width: 100vw;
}
}
@media screen and (max-aspect-ratio: 16/9){
.myVideo {
height: 100vh;
max-height: 100vh;
min-height: 100vh;
}
}
The initial aim was to center the animation at full viewport height in all resolutions by using absolute positioning and adjusting its properties accordingly.