Force Iframe YouTube-Video zu zentrieren fit und voll den Bildschirm im Hintergrund mit HTML5 CSS3

Wie erzwingen Sie HTML5 iframe YouTube-Video in die Mitte passen, decken den Vollbild-Fenster Hintergrund mit CSS3 HTML schließlich Java?Force Iframe YouTube-Video zu zentrieren fit und voll den Bildschirm im Hintergrund mit HTML5 CSS3

Wie zum Beispiel "paypal.it" Homepage Hintergrund oder "unity3d.com/5" top video, hat als iframe Youtube Video. Die iframe Abdeckung Vollbild (Zoomen) und decken die gesamte Breite und Höhe bei der Größe des Fensters. Die Größe wird neu festgelegt, wobei die 100% -Min-Breite beim Zoomen der Höhe oder die 100% -Min-Höhe beim Zoomen der Breite beibehalten wird.

Wie wird dieser Effekt mit iframe HTML5 und CSS3 erreicht?

Code-Beispiel HTML5

<div class="video" style="opacity: 1;"> 

    <iframe src="http://www.youtube.com/embed/AddHereVideoId?autoplay=1&amp;html5=1" frameborder="0" style="height: 720px;"> 
    </iframe> 

</div>

-Code CSS3 HTML schließlich würde Java Hilfe geschätzt.

Quelle

2014-07-04 Soaring Code

Ich denke, das ist, was Sie versuchen zu erreichen:

Sie

.video-wrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px;} 
.video-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} 

<div class="video-wrapper"> 
    <iframe src="http://www.youtube.com/embed/AddHereVideoId?autoplay=1&amp;html5=1" frameborder="0" allowfullscreen></iframe> 
</div>

Dies gibt ein Video, das den Behälter füllt, die es in und wird die Höhe zu automatisch skaliert werden.

ich ursprünglich diese Lösung hier gefunden: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Quelle

2015-10-23 10:35:10

Dies gibt volle Bildschirmbreite, aber es zoomt nicht, so ist es nicht Vollbild für mich. – Hinrich

Was meinen Sie mit "nicht zoomen"? –

Es ist nicht wirklich voll, das heißt, es gibt einen Rand um das Video. es skaliert zu Breite oder Höhe, aber nicht beides zu der Zeit. – Hinrich

Für eine echte Vollbild-Lösung, kann dies wie folgt erreicht werden:

HTML

<div class="video-background"> 
    <div class="video-foreground"> 
     <iframe src="https://www.youtube.com/embed/I4agXcHLySs?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe> 
    </div> 
    </div>

CSS

* { box-sizing: border-box; } 
.video-background { 
    background: #000; 
    position: fixed; 
    top: 0; right: 0; bottom: 0; left: 0; 
    z-index: -99; 
} 
.video-foreground, 
.video-background iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
} 

@media (min-aspect-ratio: 16/9) { 
    .video-foreground { height: 300%; top: -100%; } 
} 
@media (max-aspect-ratio: 16/9) { 
    .video-foreground { width: 300%; left: -100%; } 
} 
@media all and (max-width: 600px) { 
.vid-info { width: 50%; padding: .5rem; } 
.vid-info h1 { margin-bottom: .2rem; } 
} 
@media all and (max-width: 500px) { 
.vid-info .acronym { display: none; } 
}

Es ist nicht perfekt, z Es funktioniert nicht mit extremen Seitenverhältnissen des Containers, funktioniert aber in den meisten Situationen. Hier ist ein funktionierendes Beispiel: https://codepen.io/anon/pen/zRVLGJ

Quelle

2018-03-06 11:03:46 Hinrich

Force Iframe YouTube-Video zu zentrieren fit und voll den Bildschirm im Hintergrund mit HTML5 CSS3

Antwort

Verwandte Themen