Tobias Scheible
Web-Entwickler, Ingenieur & Dozent
Videos responsive einbinden

Datum: Samstag, 19. Januar 2013

Autor: Tobias Scheible

Kommentar(e): 6 Kommentare

Kategorie: Aktuelles

Tags: CSS3, HTML5, Layout, html, Responsive Webdesign, Flash, CSS, Mobile

YouTube Videos responsive einbinden

Responsive Webdesign lässt sich mittlerweile relativ leicht umsetzen. Nur externe Elemente, wie YouTube Videos, passen noch nicht ganz ins Konzept. Mit diesem Problem hatte ich auch zu kämpfen, als ich mein Layout umstellte. Aber dafür gibt es eine elegante CSS-Lösung.

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:

Responsive 16:9

Responsive 4:3

Responsive DIN A4

  • Artikel teilen:

Über Tobias Scheible

Tobias Scheible

Tobias Scheible arbeitet als wissenschaftlicher Mitarbeiter an der Hochschule Albstadt-Sigmaringen. Dort ist er als Autor und e-Tutor im Masterstudiengang Digitale Forensik tätig und leite im Bachelorstudiengang IT Security Praktika rund um das Thema Informationssicherheit. Darüber hinaus ist er Mitinitiator des Kompetenzzentrums Cyber Security Lab, welches Forschungsprojekte auf dem Gebiet der IT-Sicherheit koordiniert. Zusätzlich hält er Vorträge und Workshops zu aktuellen Themen der IT-Sicherheit.

Alle Blog-Artikel Website Facebook Twitter Xing

Kommentare

Valentin

Danke für den Tipp. Hab mich schon totgesucht um eine Lösung zu finden.

Chris

Das war mir vorher nicht bewusst, dass man mit Videos dasselbe Problem hat wie mit Website an sich. Ich frage mir nur, ob YouTube z..B. mit dem Aufkommen der Smartphones sämtliche Seiten umbauen musste. Na, viel Spaß.

APD Events - Eventagentur aus Hannover

Danke für den tollen Tipp. Schönes Layout übrigens.

Christian Schnettelker

Hey, danke für den Tipp! Habe zwar die Lösung von John Surdakowski in abgeänderter Form benutzt, aber der Artikel + Link hat mir in jedem Falle weiter geholfen.

Vitaliy / D4u

Hm, die vorgeschlagene Lösung scheint zu funktionieren, in 99% aller Fälle ist die erste Klassen-Deklaration ausreichend und natürlich die letzte.

Trotzdem hatte ich den Gedanken, dass ich nicht ganz verstehe, warum es funktioniert. Gegoogelt und.. Tataa, den Ursprungsbeitrag (Mai 2009!!!) entdeckt. alistapart.com/article/creating-intrinsic-ratios-for-video

Pia

Jo jetzt hat es geklappt, danke für den Tipp.
Hatte schon lange ohne Erfolg rumgefummelt…
Ich war der Verzweiflung nahe.

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

nach oben