How to make responsive video background in DIV container with dynamic height? - css

Question

I've been looking for a way to create a video background (preferably an HTML5 / CSS-only solution) for a header DIV on a little micro-site.
Obviously, there are a lot of resources on how to do this if you want a fixed background (position:fixed;) that'll apply to the entire page or if your DIV has a fixed height, but I want to apply it to a single DIV (within the Bootstrap framework, coincidentally) with a dynamic height attribute.
It would have a min-height value of 100vh, but the DIV's height should be able to be larger depending on the content within it (in this scenario, I have a couple of introductory paragraphs that would likely require some scroll on smaller screens).
I kind of got it half way there with my original approach, but a little bit of my video extends beyond the container DIV and giving the container an overflow:hidden; attribute doesn't help.
Here's a CodePen with the code below + Bootstrap so that you can see what I'm talking about in action.
Screenshot of the video extending into the next DIV, just in case.
This is essentially the pertinant code to my 90% of the way there option... (it looks like the video takes the 100% width this way, but it doesn't crop the height to the container):
<div class="content contain-header">
<div class="container">
<div class="row main-header">
<video autoplay loop poster="images/clouds.jpg" id="bgvid">
<source src="images/clouds.webmhd.webm" type="video/webm" />
<source src="images/clouds.mp4" type="video/mp4" />
</video>
<div class="col-md-2 col-xs-1">
</div>
<div class="col-md-8 col-xs-10">
<img src="images/logo.svg" class="header-logo" />
<h1 id="header-you">Wow</h1>
<p>Business model canvas rockstar user experience founders handshake. Startup responsive web design bootstrapping first mover advantage disruptive crowdfunding. User experience iteration seed money rockstar holy grail deployment prototype gen-z backing influencer handshake success. Virality growth hacking innovator product management iPad.</p>
<p>Crowdsource marketing non-disclosure agreement graphical user interface bootstrapping market research & development:</p>
<p class="punch">Stratup Ipsum!</p>
<p class="continue"><span class="glyphicon glyphicon-menu-down"></span></p>
</div>
<div class="col-md-2 col-xs-1">
</div>
</div>
</div>
</div>
And the relevant CSS, in SCSS format (+Bootstrap v3.3.5):
.contain-header {
background-color: rgba(0, 0, 0, 0.6);
.main-header {
min-height:100vh;
display:block;
color:$color-white;
video#bgvid {
position:absolute;
top:50%;
left:50%;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
z-index:-100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(../images/clouds.jpg) no-repeat;
background-size: cover;
}
video {
display:block;
}
.header-logo {
max-width:40%;
height:auto;
margin:0 auto;
display:block;
padding-top:20px;
}
h1#header-you {
text-transform:uppercase;
text-align:center;
font-family:$tultra;
}
p {
font-size:2rem;
}
p.punch {
font-size:2.3rem;
text-align:center;
margin-top:30px;
}
.continue {
text-align:center;
padding-top:20px;
padding-bottom:40px;
a, a:visited {
color:$color-white;
text-decoration:none;
}
a:hover {
color:$color-gray-icons;
text-decoration:none;
}
}
#media screen and (max-width: 767px) {
p {
font-size:1.4rem;
}
p.punch {
font-size:1.8rem;
}
}
}
}

Answer 1

Try adding this to the start of your styles
.contain-header {
position: relative;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.6);
...
The position relative on the contain-header means that the video min-height, min-width etc. is relative to it.