Wie kann man in DIV-Containern mit dynamischer Höhe einen ansprechenden Videohintergrund erstellen?

Question

Ich habe nach einer Möglichkeit gesucht, einen Videohintergrund (vorzugsweise eine reine HTML5/CSS-Lösung) für einen Header-DIV auf einer kleinen Mikrosite zu erstellen.

Offensichtlich gibt es eine Menge Ressourcen, wie man das macht, wenn Sie einen festen Hintergrund (Position: fixed;) wollen, der auf die ganze Seite angewendet wird oder wenn Ihr DIV eine feste Höhe hat, aber ich will wenden Sie es auf ein einzelnes DIV (im Bootstrap-Framework zufällig) mit einem dynamischen Höhenattribut an.

Es hätte einen Mindestwert von 100vh, aber die Höhe des DIV sollte größer sein, je nach Inhalt (in diesem Szenario habe ich ein paar einleitende Absätze, die wahrscheinlich einige Scrollen erfordern würden kleinere Bildschirme).

Ich habe es irgendwie mit meinem ursprünglichen Ansatz auf halbem Weg, aber ein wenig von meinem Video erstreckt sich über den Container DIV und gibt dem Container einen Überlauf: versteckt; Attribut hilft nicht.

Here's a CodePen mit dem Code unter + Bootstrap, so dass Sie sehen können, worüber ich in Aktion sprechen.

.

Dies ist im Wesentlichen der zuständige Code zu meiner 90% der Weg dahin Option ... (es sieht so aus, als ob das Video die 100% Breite auf diese Weise, aber nicht die Höhe zum Container schneidet):

<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> 

Und die entsprechende 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

versuchen, dies zu Beginn Ihres Designs Hinzufügen

.contain-header { 
    position: relative; 
    overflow: hidden; 
    background-color: rgba(0, 0, 0, 0.6); 
    ... 

Die relative Position des Headers contained bedeutet, dass die Mindesthöhe des Videos, die Mindestbreite usw. relativ zu ihm ist.