Responsive Video and Parent container height - html

Question

I have the following markup:
.jumbotron {
position: relative;
z-index: -101;
overflow: hidden;
height: 500px;
background: red;
}
.jumbotron video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
z-index: -100;
}
.video-content {
text-align: center;
color: #fff;
}
<div class='jumbotron'>
<video autoplay loop class="fillWidth">
<source src="https://ia800201.us.archive.org/12/items/BigBuckBunny_328/BigBuckBunny_512kb.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogv" />
<source src="video.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class='video-content'>
<h1>Welcome to the Site</h1>
<p>This is just a test but it shows a background video</p>
</div>
</div>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-12'>
<h2>Section Heading</h2>
</div>
</div>
</div>
My question is around the responsiveness of the video background. When I make the viewport smaller the video eventually begins to shrink and the parent div remains longer then it - resulting in an unwanted red background.
How can I ensure the parent div scales with the size of the video? So that when I bring it right down to > 480px the h2 tag will be right below the video.
You can see a a fiddle here

Answer 1

This will work for you :)
.jumbotron {
position: relative;
height: 500px;
overflow: hidden;
}
.jumbotron video {
position: absolute;
bottom: 50%;
right: 50%;
-webkit-transform: translateX(50%) translateY(50%);
transform: translateX(50%) translateY(50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}

Answer 2

you can change the fixed height to padding-bottom in .jumbotron
.jumbotron {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
height: 0;
background: red;
}
.jumbotron video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%
}
.video-content {
text-align: center;
color: #fff;
}
<div class='jumbotron'>
<video autoplay loop class="fillWidth">
<source src="https://ia800201.us.archive.org/12/items/BigBuckBunny_328/BigBuckBunny_512kb.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogv" />
<source src="video.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div class='video-content'>
<h1>Welcome to the Site</h1>
<p>This is just a test but it shows a background video</p>
</div>
</div>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-12'>
<h2>Section Heading</h2>
</div>
</div>
</div>

Answer 3

Not sure if I understood. I made the video fill the screen, by changing its height and width to the viewport size. But needs to keep the aspect ratio.
.jumbotron video {
...
height: 100vh;
width: 100vw;
...
}