One of my main goals is to create a jumbotron with a video that plays, occupying 100% width and 70% height of the screen. However, I am facing an issue where the video follows the scrolling behavior when I don't want it to. Specifically, as I scroll down the page, the video scrolls along with it. How can I prevent this from happening?
In addition to the jumbotron, I am using a nav data spy with a vertical navbar in the body. The undesired scrolling behavior remains even when I implement this navigation feature. Here is the code snippet for reference:
<div className="jumbotron">
<video className="video-background" preload="true" muted="true" autoplay="true" loop="true">
<source src="example.mp4" type="video/mp4" />
</video>
<div className="container-fluid" id="content">
<h1 className="display-3">Heading Title</h1>
<p className="lead">Sub Text</p>
<a className="btn btn-primary btn-lg" href="#learnmore">Learn More</a>
</div>
</div>
Here is the CSS code being used:
.jumbotron{
position: relative;
z-index:-2;
height:62.5vh;
}
.video-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -1;
width:100%;
height: 70%;
}
I would greatly appreciate any assistance or insights on how to resolve this issue. Please note that I am working with create-react-app. Thank you.