Ein Vimeo oder YouTube Video “responsive” einbinden
“Responsive” Webdesign ist heute in aller Munde. Um es auch den Schlagwort-Unwissenden kurz zu erklären: “Responsive” bedeutet in Bezug auf eine Internetseite im Prinzip nur, dass sich Layout und Design selbstständig an die Größe des Displays des Nutzers anpasst, egal ob dieser nun mit einem Handy, einem Tablet PC oder einem normalen Monitor surft. Es gibt also nicht mehr, wie in den Anfängen des mobilen Webdesigns, extra Versionen der Internetseite für Handys und andere Geräte, sondern nur eine Version. Das ist zeitsparend, da nicht verschiedene Versionen entwickelt und betreut werden müssen und zukunftssicherer, da die Seite auch automatisch mit der nächsten Generation von Mobiltelefonen funktioniert. Wichtig ist dabei jedoch das sich alle verwendeten Elemente skalieren lassen. Das ist mit Hilfe von CSS in Bezug auf Bilder und Texte kein Problem. Bei einem meiner Projekte tauchte aber gerade die Frage auf: Wie sieht es mit einem durch ein
Über diesen kann man zunächst den iFrame ansteuern und in der Grösse anpassen:
.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Und dann in einem zweiten Schritt den Abstand des iFrames nach unten in das relative Verhältnis der Videogröße setzen:
.responsive-video {
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;
}
Der Abstand nach unten von 56.25% entspricht dem Verhältnis von 16 zu 9 (9 / 16 (x 100) =56.25%). Der DIV Container hat also immer eine Höhe von 0px + 56.25% im Verhältnis zur Breite. Oder mit anderen Worten: Der Container ist immer im 16:9 Format, genauso wie das Video, das wiederum die Grösse des iFrames hat, welcher immer 100% der Höhe und Breite des umgebenden DIV Containers hat.
Klingt kompliziert, ist es aber eigentlich gar nicht. Als Beispiel: Wird ein Video mit einem anderen Seitenverhältnis eingebunden muss nur der “padding-bottom” Wert geändert werden. Ist das Verhältnis beispielsweise 2:1 ergibt das einen Abstand von 50% (2/1 (x 100)=50%) nach unten. Dies klappt sowohl mit Vimeo als auch mit YouTube Videos. Die Videos skalieren danach sauber in der Größe mit ohne das ein häßlicher Balken bzw. Abstand entsteht.