Bootstrap div height won't resize properly with video background - html

Question

I have a video playing in the background of my top div. It looks fine when the screen is full size, but when I resize the browser window to see how it will look on smaller screens, the height of the div remains the same, leaving a big empty space between the background video and the next div.
Here is a preview of the site if you'd like to see for yourself, along with the specific code. https://codepen.io/CarlyWysocki/pen/YYaBOd
HTML:
<div class="jumbotron" id="top">
<video autoplay loop>
<source src="https://videos2.sendvid.com/03/25/up5p1yhu.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="container text-center">
<h1>Mac Demarco</h1>
<h4>Canadian singer-songwriter, multi-instrumentalist and producer.</h4>
<i class="fa fa-chevron-circle-down"></i>
</div>
</div>
CSS:
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #eee;
height: 100%;
overflow: hidden;
position: relative;
}
.container {
position: relative;
}

Answer 1

If it just stays in the center, you can add css media queries resizing appropriately. One could also just use a picture for small screens via media queries.
Using the referenced stack overflow answer:
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}