Video Höhe 100vh ignorieren Überlauf versteckt.

Question

Ich bin mit 100vh rumspielen, um den Jumbotron und seinen Hintergrund füllen den Bildschirm des Benutzers. Ich hatte dieses Problem nicht, wenn ich ein Foto verwende, aber mein Kunde möchte einen Videohintergrund.

Ich habe Überlauf auf ausgeblendet, aber die Website zeigt den Überlauf mit der horizontalen Bildlaufleiste. Ich kann nicht herausfinden, warum es nicht abgeschnitten wird.

Hier ist mein Code für das Jumbotron und Video Feature.

Website Here

#video-background { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    z-index: -1000; 
    height: 100vh; 
    } 

    .jumbotron{ 
    font-family: 'Raleway', Helvetica, Arial; 
    background: rgba(0,0,0,0.6); 
    background-size: cover; 
    background-position: center; 
    height: 100vh; 
    padding: 60px 0; 
    margin: 0; 
    position: relative; 
    overflow: hidden; 
    } 

HTML

<div class="jumbotron"> 
     <video id="video-background" preload muted autoplay loop> 
      <source src="vid/lowres.mp4" type="video/mp4"> 
     </video> 
    </div> 

Offensichtlich gibt mehr im Inneren des jumbotron ist, aber ich glaube nicht, es relevant ist.

Answer 1

Overfow-x: versteckt; funktioniert gut für mich in Chrom. Ich sehe keine horizontale Bildlaufleiste. Versuchen Sie das

.jumbotron{ 
    font-family: 'Raleway', Helvetica, Arial; 
    background: rgba(0,0,0,0.6); 
    background-size: cover; 
    background-position: center; 
    height: 100vh; 
    padding: 60px 0; 
    margin: 0; 
    position: relative; 
    overflow-x: hidden; 
    } 

Answer 2

Ihre Einstellung zu niedrig, versuchen Sie auf dem DOM-Knoten darüber, auf .jumbotron, arbeitete an Chrom für mich.