Wymuszenie iframe YouTube wideo do centrum pasuje i pełne zakrycie ekranu w tle przy użyciu HTML5 CSS3

Question

Jak wymusić na YouTube wideo HTML5 iframe, aby pokryć tło całego ekranu za pomocą CSS3 HTML, ewentualnie Java?

Jak na przykład „paypal.it” strona główna tło lub „unity3d.com/5” Najlepszy film ma jako iframe YouTube wideo. Pokrywa cały ekran (powiększanie) i pokrywa całą szerokość i wysokość podczas zmiany rozmiaru okna. Zmienia rozmiar, zachowując 100% szerokości minimalnej, powiększając wysokość lub 100% wysokości min, powiększając szerokość.

W jaki sposób osiąga się ten efekt za pomocą iframe HTML5 i CSS3?

Przykład kodu 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> 

Kod HTML CSS3 ostatecznie pomaga Java będą mile widziane.

Answer 1

myślę, że to, co próbujesz osiągnąć:

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

To daje film, który wypełnia pojemnik, że jest i będzie automatycznie skalować wysokość też.

pierwotnie znaleźć to rozwiązanie tutaj: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Answer 2

dla prawdziwego pełne rozwiązanie ekranu, to można osiągnąć tak:

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

To nie jest doskonałe, np nie działa z proporcjami wymiarów pojemnika, ale działa w większości sytuacji. Oto działający przykład: https://codepen.io/anon/pen/zRVLGJ