blackbars auf Youtube deaktivieren embed iFrame

Question

Ich bette ein Video von Youtube auf meiner Webseite ein Ich möchte, dass es 100% auf dem Bildschirm streckt, ohne Blackbars. Obwohl ich ihm eine Breite von 100% gebe, hat es immer noch einige schwarze Balken an den Seiten des Videos. Wie kann ich es loswerden?

Screenshot: Schnipsel: https://jsfiddle.net/o3rp6an9/1/

<div id="video"> 
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/zWAiQJvwb8Q?autoplay=1&loop=1&controls=0&rel=0&showinfo=0&playlist=zWAiQJvwb8Q&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
</div> 

#video { 
    height:100%; 
    width:100% !important; 
    background-size:100% 100%; 
    position:relative; 
    overflow:hidden; 
} 

Es ist eine andere Frage dazu, aber es hat im Grunde mir nicht helfen.

Answer 1

Sie möchten das Video absolut in einem Wrapper positionieren, der eine vertikale Auffüllung festlegt, die dem Seitenverhältnis des Videos entspricht. Um das Padding-/Seitenverhältnis zu erhalten, teile die Höhe des Videos durch die Breite und multipliziere mit 100, um einen Prozentsatz zu erhalten.

* {padding:0;margin:0;box-sizing:border-box;} 
 
#video { 
 
\t position: relative; 
 
\t padding-bottom: 56.25%; /* 16:9 */ 
 
\t height: 0; 
 
} 
 
#video iframe { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

<div id="video"> 
 
\t \t <iframe width="100%" height="100%" src="https://www.youtube.com/embed/zWAiQJvwb8Q? autoplay=1&loop=1&controls=0&rel=0&showinfo=0&playlist=zWAiQJvwb8Q&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
 
</div>