My goal is to prevent the video from overflowing the container by maintaining its aspect ratio and hiding the excess portion that does not fit within the container. I have attempted using overflow: hidden; on the container, but it doesn't seem to work as expected.
Essentially, when viewing the site, I want the video to retain its aspect ratio without resizing while only displaying what fits within the container.
<header id="welcome-section">
<div>
<p id="hello">Hello, my name is</p>
<h1 id="ryan">Ryan Thacker</h1>
a href="#section-a" class="button">Learn More</a>
</div>
<video autoplay muted loop id="bgVideo">
<source src="images/Beach.webm" type="video/mp4">
</video>
</header>
#welcome-section {
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 20px;
text-align: center;
color: white;
font-family: "Montserrat", sans-serif;
}
#bgVideo {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1;
}