Making meine Video-Header reagiert

Question

In Ordnung, so hat meine Website einen Video-Header. Ich möchte, dass es reagiert, wenn der Browser verkleinert wird (oder in der mobilen Ansicht), wie kann ich das tun? Es funktioniert gut, wenn ich es auf meinem Monitor ansehe, aber sobald ich das Browserfenster verkleinere, wird das Video klein und ein riesiger weißer Raum erscheint darunter (ungefähr 500px hoch). Hier ist der Code:

<div class="header-container"> 
     <div class="video-container"> 
      <video muted preload="true" autoplay="autoplay" loop="loop" volume="0" poster="4.png" 
       <source src="video/drift.mp4" type="video/mp4"> 
       </video> 
     </div> 
    </div> 
</div> 

.header-container { 
    width: 100%; 
    min-height: 1000px; 
    border-left: none; 
    border-right: none; 
    position: relative; 
    margin-top: 0; 
} 

.video-container { 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    height: 1000px; 
    width: 100%; 
    overflow: hidden; 
} 

video { 
    position: absolute; 
    z-index: -1; 
    opacity: 0.78; 
    width: 100%; 
} 

.header-container h1 { 
    color: #3cbc8d; 
    z-index: 1; 
    text-align: center; 
    margin-right: auto; 
    margin-left: auto; 
    margin-top: 10%; 
    border: 3px solid #fffff; 
    padding: 10px; 
    border-radius: 15px; 
    width: 700px; 
    letter-spacing: 3px; 
    font-size: 100px; 
    font-family: 'Montserrat', sans-serif; 
    } 

.header-container h2 { 
    color: #3cbc8d; 
    z-index: 1; 
    text-align: center; 
    margin-right: auto; 
    margin-left: auto; 
    border: 3px solid #fffff; 
    padding: 10px; 
    border-radius: 15px; 
    width: 700px; 
    letter-spacing: 3px; 
    font-size: 30px; 
    font-family: 'Montserrat', sans-serif; 
     } 

    <div class="header-container"> 
     <div class="video-container"> 
      <video preload="true" autoplay="autoplay" loop="loop" volume="0" poster="4.png" 
       <source src="video/cruise1.mp4" type="video/mp4"> 
       </video> 
         <h1>3P4B</h1> 
          <h2>Portable Power Pack for Boating</h2> 
          <div class="letsgo"> 
           <a href="#about" class="btn btn-sample hvr-pulse " role="button" style="font-size: 3.5em; border-radius: 50px; text-align: center;"><span class="glyphicon glyphicon-arrow-down"></span></a> 
           </div> 
     </div> 
    </div> 
</div> 

Answer 1

Der Grund für die Leerzeichen unter dem Video ist, dass das Video Bei der Schrumpfung bleibt das Seitenverhältnis unverändert, um der Bildschirmgröße zu folgen. Z.B. Da Sie Ihre .header-container-Klasse auf einer Mindesthöhe von 1000 px gesperrt haben, ist der angezeigte Leerraum der Hintergrund des .header-containers.

EDIT: Hintergrundvideo ist jetzt absolut positioniert, um überlappende Inhalte nicht zu stören. .header-container wurde auf 94% der Bildschirmhöhe eingestellt, mit einer maximalen Grenze von 1000px.

Ich denke, das wahrscheinlich ist, was Sie vorhaben, für mit dem aktuellen Setup:

.header-container { 
    width: 100%; 
    width: 100vw; 
    height: 94%; 
    height: 94vh; 
    max-height: 1000px; 
    border-left: none; 
    border-right: none; 
    position: relative; 
    margin-top: 0; 
    background-color: #000; 
    padding: 10% 0 0 0; 
    box-sizing: border-box; 
} 

.video-container { 
    position: absolute; 
    z-index: 0; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

video { 
    position: absolute; 
    opacity: 0.78; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%,-50%); 
    -mos-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
} 

.header-container h1 { 
    position: relative; 
    max-width: 80%; 
    display: block; 
    margin: 0 auto; 
    color: #3cbc8d; 
    z-index: 1; 
    text-align: center; 
    border: 3px solid #ffffff; 
    padding: 10px; 
    border-radius: 15px; 
    letter-spacing: 3px; 
    font-size: 100px; 
    font-family: 'Montserrat', sans-serif; 
} 

.header-container h2 { 
    position: relative; 
    color: #3cbc8d; 
    z-index: 1; 
    text-align: center; 
    max-width: 80%; 
    margin: 25px auto; 
    border: 3px solid #ffffff; 
    padding: 10px; 
    border-radius: 15px; 
    letter-spacing: 3px; 
    font-size: 30px; 
    font-family: 'Montserrat', sans-serif; 
} 

aktualisiert Stift Siehe hier:

http://codepen.io/flapjax/pen/zqXKaY

Diese skaliert das Video immer füllen Sie das gesamte Hintergrundbreite und/oder Höhe des Header-Containers. Es emuliert das 'Cover'-Attribut und schneidet einige der Höhe oder Breite des Videos ab, um es richtig zu skalieren, um den Header-Container auszufüllen.

Answer 2

Enthält diese Hilfe Sie, laden Sie ein Video von 1920 * 1080 Auflösung

Fiddle https://fiddle.jshell.net/3zLx1sdz/