Here is the code snippet I am working with:
.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>I'm concerned about the responsiveness of the video background. As I reduce the viewport size, the video starts shrinking while the parent div remains larger, leading to an unwanted red background showing up.
How can I make sure that the parent div scales appropriately with the video size? I want the h2 tag to move right below the video when the viewport width goes below 480px.
You can view a demo on this issue in this link