Ein Video responsive einbinden - das Problem
<iframe frameborder="0" height="315" width="560" src="https://www.youtube.com/embed/b8A4z4IP-to"></iframe>
Wir alle kennen das Problem, dass Videos sich nicht optimal an mobile Endgeräte wie Smartphones oder Tablets anpassen. Beim normalen Einbinden von YouTube ist in der mobilen Ansicht nur ein Ausschnitt des Videos zu sehen. Wir zeigen euch, wie ihr YouTube, Vimeo und andere Videos korrekt einbindet, damit sie auf allen Endgeräten optimal funktionieren. Alles was ich braucht ist ein kleinwenig CSS. JavaScript wird dabei nicht verwendet (früher z.B. fitvid). Unsere Lösung kommt von Thierry Koblenz aus dem Jahr 2009. Er hatte damals bereits einen Lösung für das Problem.
Ein Video responsive einbinden - die Lösung
Im Grunde ist die Lösung des Problems sehr einfach. Den Embed-Code von YouTube oder Vimeo wrappen wir einfach in einen eigenen DIV-Container. Der könnte so aussehen:
< iframe frameborder="0" height="315" width="560" src="https://www.youtube.com/embed/b8A4z4IP-to">
Wenn das erledigt wurde, sprechen wir den iframe Tag mit CSS an. Der notwendige Code sieht dann so aus: .responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .responsive-video { position: relative; padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/ padding-top: 0px; height: 0; overflow: hidden; }
Du fragst dich nun bestimmt, woher der Wert 56,25% kommt. Ganz einfach. Dieser Wert entspricht dem Verhältnis von 16 zu 9 (9 / 16 (x 100) = 56.25%). Somit hat der äußere DIV-Container immer das 16:9 Format, genauso wie das eingebundene Video. Das Video hat immer die Größe 100%, d.h. egal welches Format, Skalierung oder Pixeldichte dein Endgerät hat, das Video wird immer korrekt angezeigt.
Moderne CMS, wie z.B. TYPO3 oder WordPress, bringen von Haus aus Lösungen mit, die das automatisch