Как сделать адаптивный фон видео в контейнере DIV с динамической высотой?

Я искал способ создать видеофон (желательно решение только для HTML5/CSS) для заголовка DIV на небольшом микросайте.

Очевидно, есть много ресурсов о том, как это сделать, если вам нужен фиксированный фон (position:fixed;), который будет применяться ко всей странице, или если ваш DIV имеет фиксированную высоту, но я хочу применить его к одиночный DIV (в рамках Bootstrap, по совпадению) с динамическим атрибутом высоты.

Минимальная высота будет равна 100vh, но высота DIV должна быть больше в зависимости от содержимого внутри него (в этом сценарии у меня есть пара вводных абзацев, которые, вероятно, потребуют прокрутки на небольших экранах).

Я как бы сделал это наполовину с моим первоначальным подходом, но небольшая часть моего видео выходит за пределы контейнера DIV и дает контейнеру переполнение: скрытый; атрибут не помогает.

Вот CodePen с приведенным ниже кодом + Bootstrap, чтобы вы могли видеть, о чем я говорю в действие.

Скриншот видео, переходящего в следующий DIV, на всякий случай.

По сути, это соответствующий код для моего варианта 90% пути... (похоже, что видео таким образом занимает 100% ширины, но не обрезает высоту до контейнера):

<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"><a href="#next"><span class="glyphicon glyphicon-menu-down"></span></a></p>
          </div>        
          <div class="col-md-2 col-xs-1">
          </div>
        </div> 
      </div> 
</div>

И соответствующий CSS в формате SCSS (+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;
          }
        }
    }
}