Forza l'iframe del video di YouTube per centrare in forma e coprire lo schermo in background usando HTML5 CSS3

Question

Come si forza il video di YouTube in HTML5 iframe per adattarlo al centro, coprire lo sfondo della finestra a schermo intero utilizzando HTML CSS3 e infine Java?

Come per esempio "paypal.it" home page sfondo o "unity3d.com/5" il video in alto, ha come il video youtube iframe. Il iframe copre lo schermo intero (zoom) e copre tutta la larghezza e l'altezza quando ridimensiona la finestra. Si ridimensiona mantenendo la larghezza del 100% min ingrandendo l'altezza o il 100% di altezza minima ingrandendo la larghezza.

Come si ottiene questo effetto utilizzando iframe HTML5 e CSS3?

Esempio di codice 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> 

codice CSS3 HTML eventualmente aiutare Java sarebbe apprezzato.

Answer 1

credo che questo è quello che stai cercando di raggiungere:

.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> 

questo vi darà un video che riempie il contenitore che è dentro e automaticamente scala l'altezza troppo.

Originariamente ho trovato questa soluzione qui: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Answer 2

Per una soluzione reale a schermo intero, questo può essere raggiunto in questo modo:

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; } 
} 

Non è perfetto, ad es non funziona con le proporzioni extereme del contenitore, ma funziona per la maggior parte delle situazioni. Ecco un esempio: https://codepen.io/anon/pen/zRVLGJ