HTML5-Video-Hintergrund in Div - brauche Hilfe Größenanpassung auf Fenstergröße

Question

Ich habe daran gearbeitet den ganzen Tag, aber sogar mit all meinem googeln, ich habe es nicht herausgefunden.

Grundsätzlich würde Ich mag die gleiche Wirkung haben wie auf www.tesla.com

Das Video ist Gross, aber die Größe entsprechend der Größe des Fensters, und zugleich beschneidet es ein wenig, aber hält das Video zentriert (probieren Sie es auf der Tesla-Website aus, es ist großartig). Wenn es zu klein wird, wird stattdessen ein Bild angezeigt (für Mobilgeräte).

ich die Seite auf einem jekyll Thema mit GitHub Seiten ausgeführt wird: https://alanlemoine.github.io/personal

Meine Fragen:

• Auf meinem 13" Bildschirm ist das Video zu groß und eine vertikale Bildlaufleiste erscheint ich möchte es um das Fenster haben passen, ohne Scrollbalken Auch wenn es das Video am unteren Rand beschneidet.. (etwas mit „Überlauf: versteckt“? ich denke)
• wenn r Wenn das Fenster verkleinert wird, wird das ganze Video in der Größe verändert. Ich möchte haben Größe geändert wie www.tesla.com, wo es ernten, aber es zentriert hält.
• Ich möchte nicht das Video vollständig Vollbild sein. Ich brauche die Navigationsleiste an der Spitze. Also in einem DIV ist besser.

Können Sie helfen?

Vielen Dank im Voraus. Hier

ist, was ich habe:

/* Default hide the video on all devices */ 
 

 
#video { 
 
    display: none 
 
} 
 

 

 
/* Default display the image to replace the video on all devices */ 
 

 
#videosubstitute { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    max-width: 100% 
 
} 
 

 

 
/* Medium Devices, Desktops */ 
 

 
@media only screen and (min-width: 992px) { 
 
    #video { 
 
    display: block 
 
    } 
 
    #videosubstitute { 
 
    display: none 
 
    } 
 
} 
 

 
#videoDiv { 
 
    width: 100%; 
 
    height: 360px; 
 
    position: relative; 
 
} 
 

 
#videoBlock, 
 
#videoMessage { 
 
    width: 100%; 
 
    height: 360px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#video { 
 
    width: 100%; 
 
} 
 

 
#videoMessage { 
 
    padding: 0.4em; 
 
    margin: 0; 
 
} 
 

 
#videoMessage { 
 
    color: white; 
 
    z-index: 99; 
 
} 
 

 
#videoMessage h1 { 
 
    font-size: 3em; 
 
    color: #ffffff; 
 
    text-align: center; 
 
}

<div id="videoDiv"> 
 
    <div id="videoBlock"> 
 
    <div><img src="http://www.imi21.com/wp-content/uploads/2016/11/t12.jpg" id="videosubstitute" alt="" width="800"></div> 
 
    <video preload="preload" id="video" autoplay="autoplay" loop="loop"> 
 
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"></source> 
 
</video> 
 
    <div id="videoMessage"> 
 
     <h1>Hello world</h1> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Dies ist ein relativ einfacher Trick, den Sie mit HTML 5 und einige CSS tun können.

Zunächst müssen Sie Ihr Videoelement absolut positionieren und seinen Überlauf ausblenden. Dann machen Sie es 100% der Breite und Höhe der Seite.

Als Nächstes werden Sie das Video im Wesentlichen dehnen, um es basierend auf dem Seitenverhältnis des Bildschirms zu beschneiden. Es gibt eine raffinierte Sache namens Object-Fit, die Sie auch einfach als Objekt-Fit schreiben können: Cover, das Ihnen den gleichen Effekt bietet, aber noch nicht von IE unterstützt wird, so dass Sie beide benötigen, wenn Sie sich dafür entscheiden.

Ich habe einen Codepen mit einer Lösung für Sie enthalten. http://codepen.io/DrkDevil/pen/OpXxZV/

<nav>your navigation goes here.</nav> 
<div class="flexCon" > 
    <div id="videoMessage"> 
    <h1>Hello world</h1> 
    </div> 
</div> 
<div id="videoBg"> 
    <video loop muted autoplay poster="img/videoframe.jpg"> 
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"> 
    </video> 
</div> 
<style> 
#videoBg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;} 
#videoBg > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
@media (min-aspect-ratio: 16/9) { #videoBg > video { height: 300%; top: -100%; }} 
@media (max-aspect-ratio: 16/9) { #videoBg > video { width: 300%; left: -100%; }} 
@supports (object-fit: cover) {#videoBg > video { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }} 

/* Demo Classes */ 
nav { position:fixed; width:100%; top:0; left:0; padding:20px; background:#fff; z-index:2;} 
/* Center content with flexbox container */ 
.flexCon { height: 100vh; display: flex; justify-content: center; align-items: center; } 
/* Position the content relative to the flex container */ 
#videoMessage { z-index:1; position:relative; } 
</style> 

Hier ist eine wirklich gute explination, wie können Sie erreichen, was Sie suchen in einer mehr in die Tiefe.

https://fvsch.com/code/video-background/