Vermeiden Lücke unten in ansprechenden Video-Hintergrund

Question

Ich versuche, einen ansprechenden Video-Hintergrund wie diese zu machen:

HTML

<video id="bgvid" autoplay="true" loop="true" preload="auto" poster="img/code-landing-page/desktop-bg-2.png"> 
    <source src="videos/code-promo-bg.mp4" type="video/mp4"> 
</video> 

CSS

html, body{ 
     margin:0px; 
     padding: 0px; 
     height: 100%; 
     width: 100%; 
     overflow: hidden; 
    } 
    video#bgvid { 
     position: absolute; 
     min-width: 100%; 
     min-height: 100%; 
     z-index: -100; 
     width: 120%; 
     height: auto; 
     //width: auto; 
     //height: 100%; 
    } 

Aber wenn Fensterhöhe ist groß genug, hinterlässt diese Lösung eine weiße Lücke am unteren Rand. Gibt es eine Möglichkeit, dies zu vermeiden, wie beispielsweise in www.y.co?

Answer 1

Ich würde dies versuchen:

video#bgvid { 
    z-index: -100; 
    min-width: 100vw; 
    min-height: 100vh; 
} 

Der Grund dahinter ist, wenn man nur Höhe: 100vh oder Breite: 100vw Browser, um das Video auf den Bildschirm passen und die kleineren Seiten gewinnen. Mit min- * gewinnt die längere Seite und aufgrund des Überlaufs: versteckt in Body-Styles wird sie weggeschnitten. (In meinen Tests sah das Video nicht verzerrt aus)

vw und vh sind Einheiten wo 100vw bedeutet ganze Breite des Browser-Bildschirms und 100vh ganze Höhe des Browser-Bildschirms.

Es könnte einen Blick wert sein in diesem post auf CSS-Tricks, gibt es eine Lösung am Boden