YouTube Videos responsive einbinden
Externe Elemente wie YouTube Videos, Slideshare Präsentationen oder Issuu Online-Kataloge können per iFrame oder Flash-”Object” eingebunden werden. Diese Elemente besitzen aber immer nur eine feste Pixelgröße, was bei einem flexiblen Layout ziemlich störend ist. Eine prozentuale Angabe der Größe macht keinen Sinn, da sich die Angabe auf das Elternelement bezieht und nicht auf den Inhalt des eingebundenen Elements selbst.
Die Lösung ist ein DIV-Wrapper und ein CSS-Trick. Wie die Technik funktioniert, zeigt John Surdakowski in seinem Artikel “Responsive Youtube Embed”. Allerdings ist diese Lösung nur für Elemente im 16 zu 9 Format gedacht. Präsentationen im 4 zu 3 Format bekommen dann einen Rand. Daher habe ich mehrere Klassen angelegt.
.responsive_16-9, .responsive_4-3, .responsive_a4{ position: relative; <!-- 16 zu 9 Layout für Videos --> padding-bottom: 56.25%; height: 0; overflow: hidden;
}
.responsive_4-3{ <!-- 4 zu 3 Layout für Präsentationen --> padding-bottom: 75%;
}
.responsive_a4{ <!-- DIN A4 Layout für Dokumente --> padding-bottom: 142.86%;
}
.responsive_16-9 iframe, .responsive_4-3 iframe, .responsive_a4 iframe,
.responsive_16-9 object, .responsive_4-3 object, .responsive_a4 object,
.responsive_16-9 embed, .responsive_4-3 embed, .responsive_a4 embed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}Hier drei Beispiele mit den verschiedenen Klassen:
<div class=”responsive_16-9”> <iframe src="https://www.youtube.com/embed/aeHuTZu1XNw?rel=0" width="560" height="315" frameborder="0" allowfullscreen></iframe> </div>
<div class=”responsive_4-3”> <iframe src="http://de.slideshare.net/slideshow/embed_code/12837964" width="427" height="356" frameborder="0" allowfullscreen> </iframe> </div>
<div class=”responsive_a4”> <iframe src="http://de.slideshare.net/slideshow/embed_code/8701117" width="479" height="511" frameborder="0" allowfullscreen> </iframe> </div>
Einfach das Browser-Fenster verkleinern und das Video und die Dokumente werden sich immer anpassen:
