Bootstrap Video Background Not Responsive (Not Scaling) - html

Question

I'm trying to use bootstrap to make my personal website with a video in the background. When I make the browser window smaller, the video, title placeholder, and buttons all do not scale (not responsive). I don't know what's wrong. Any help would be useful. Thanks so much!
Here's my HTML code:
<div class = "header-container">
<div class = "video-container">
<video preload = "true" autoplay loop volume = "0">
<source src = "videos/main.mp4" type = "video/mp4" >
</video>
</div>
<h3 class="main">
Title Placeholder
<div class="col-md-5 text-center col-sm-offset-3">
Services
About
Contact
</div>
</h3>
</div>
Here's my CSS code:
.header-container {
width: 100%;
height: 700px;
border-left: none;
border-right: none;
position: absolute;
padding: 10px;
overflow: hidden;
}
.video-container {
position: absolute;
top: 0%;
left: 0%;
height: 700px;
width: 100%;
overflow: hidden;
}

Answer 1

try to add in style
h3.main
{
position:relative;
z-index:1;
}
video
{
width:100%;
}

Answer 2

Okay you are giving the .video-container a static height. Make it's height to 100% . After that grab your video element and give it a min-width and max-width of 100% . Yo might also need to add the max-width property to the video and set it to 100%. You can also use width and height of 100% rather than using min-width and min-height. See what works and create a fiddle.
.video-container {
position: absolute;
top: 0%;
left: 0%;
height: 700px;
width: 100%;
overflow: hidden;
}
video { max-width: 100%; min-width: 100%; min-height: 100%; }