How to make responsive video background in DIV container with dynamic height?
<p>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.</p>

<p>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.</p>

<p>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).</p>

<p>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.</p>

<p><a href="http://codepen.io/ohemgeeste7en/pen/vKVXjy" rel="nofollow">Here's a CodePen</a> with the code below + Bootstrap so that you can see what I'm talking about in action.</p>

<p><a href="http://i.stack.imgur.com/5uzWs.png" rel="nofollow">Screenshot of the video extending into the next DIV, just in case</a>.</p>

<p>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):</p>

<pre><code>&lt;div class="content contain-header"&gt;
  &lt;div class="container"&gt;
    &lt;div class="row main-header"&gt;

      &lt;video autoplay loop poster="images/clouds.jpg" id="bgvid"&gt;
        &lt;source src="images/clouds.webmhd.webm" type="video/webm" /&gt;
        &lt;source src="images/clouds.mp4" type="video/mp4" /&gt;
      &lt;/video&gt;

      &lt;div class="col-md-2 col-xs-1"&gt;
      &lt;/div&gt;
      &lt;div class="col-md-8 col-xs-10"&gt;
        &lt;img src="images/logo.svg" class="header-logo" /&gt;
        &lt;h1 id="header-you"&gt;Wow&lt;/h1&gt;
        &lt;p&gt;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.&lt;/p&gt;
            &lt;p&gt;Crowdsource marketing non-disclosure agreement graphical user interface bootstrapping market research &amp; development:&lt;/p&gt;
            &lt;p class="punch"&gt;Stratup Ipsum!&lt;/p&gt;
            &lt;p class="continue"&gt;&lt;a href="#next"&gt;&lt;span class="glyphicon glyphicon-menu-down"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;        
          &lt;div class="col-md-2 col-xs-1"&gt;
          &lt;/div&gt;
        &lt;/div&gt; 
      &lt;/div&gt; 
&lt;/div&gt;
</code></pre>

<p>And the relevant CSS, in SCSS format (+Bootstrap v3.3.5):</p>

<pre><code>.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;
          }
        }
    }
}
</code></pre>