Is there a way to ensure that the bucket-list.mp4 video stays contained within the video-jumbotron div? Currently, the video's height extends beyond the bottom of the page depending on screen size, rather than being cut off and confined within the
<div class="video-jumbotron">https://i.sstatic.net/vsSW4.png
Check it out
<div class="video-jumbotron">
<video id="bg-video" autoplay="true" loop='true'>
<source src="/assets/bucket-list.mp4" type="video/mp4" />
</video>
<%= image_tag 'goal-setting-bucket-list-website.png' %>
CHALLENGE WHAT YOU DO
TO CREATE THE LIFE YOU WANT
</div>
# The bottom of the video overflows below this <div>
<div style="background-color: white;">
Testing
</div>
CSS Styling
.video-jumbotron {
padding-top: 25px;
padding-bottom: 40px;
margin-bottom: 20px;
}
#bg-video {
top: 0px;
left: 0px;
right: 0px;
position: fixed;
z-index: -1;
width: 100%;
}