Letztens habe ich über responsives Webdesign und mobile Seiten philosophiert, heute geht es um ein etwas praktischeres Beispiel. Jedem ist folgendes Problem bekannt: Man besucht eine responsive Seite und stellt fest, dass das Design zerschossen ist. In manchen Fällen ist der Grund ein YouTube-Video oder ähnliches. Der Spaß sich durch diese Seite zu quälen, hält sich dann eher in Grenzen, denn entweder bekommt man eine vernünftige responsive Seite geliefert, oder man lässt es besser bleiben. Damit eine derartige Seitenverkrüppelung nicht passiert, schreibe ich mal im Folgenden, wie man YouTube-Videos an die Seitenbreite anpassen kann.
-
- So sollte das responsive Design nicht aussehen.
Die Lösung ist dabei eigentlich recht einfach. Zuerst einmal der normale Einbettungscode eines YouTube-Videos:
<iframe src="//www.youtube.com/embed/GBaHPND2QJg?rel=0" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Die Idee ist ganz einfach. Wir packen das Video in ein div-Element und passen dies sozusagen an die Seitenverhältnisse an, wodurch dann automatisch auch das sich dort eingebettete Video anpasst.
<div class="video-container"><iframe src="//www.youtube.com/embed/GBaHPND2QJg?rel=0" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
Dieses div-Element hat die Klasse “video-conatainer. Natürlich kann man den CSS-Code auch in eine Style-Eigenschaft packen. Dies ist aber sehr umständlich zu implementieren, außerdem wollen wir die Video-Container-Klasse global nutzen. Also schreiben wir den CSS-Code in unserer Stylesheet.
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Zur Erklärung: Die ersten Zeilen passen das div-Element selber an, sodass durch die Padding-Eigenschaften genug Platz für das Video vorhanden ist. Die Höhe der Box wird demnach durch die Padding-Eigenschaft geregelt. Unten wird dann dann das eingebettete Video selber angepasst: Oben und links soll es direkt am Rand der Box platziert sein und eine Breite und Höhe von 100% aufweisen, sodass es genau in dem Video-Container-Element liegt. Durch die relative Positionierung des Video-Container-Elementes stellt dies einen Rahmen des absolut positionierten eingebetteten Videos dar. Das war’s auch schon.