Videos aus externen Quellen (z.B. YouTube, Vimeo) in Responsive Webdesign integrieren

Videos, die nicht extern sind, sind kein Problem bei Responsive Webdesign

Wie wir ein eigenes Video durch die Verwendung von HTML5 einbinden, ist im entsprechenden Kapitel unter https://www.html-seminar.de/html-5-video.htm beschrieben.

Videos, die auf dem eigenen Webspace gehostet sind, können in das Responsive Webdesign genauso eingebunden werden wie wir es bereits mit Bildern gemacht haben:

video {
    max-width: 100%;
    height: auto;
}

Externe Videos (z.B. YouTube) in Responsive Webdesign

Interessant wird das Einbinden von externen Videos wie Beispielsweise Videos von YouTube. Hier haben wir, wenn der Besitzer es zulässt, unter dem Video den Punkt Teilen und dort dann Einbetten. Wir können die Videogröße in Pixelgröße festlegen.

Als Beispiel kommt ein Video von meinem Fotokurs zum Einsatz, das es unter https://www.youtube.com/watch?v=hZAt29lHMeo gibt.

Erstellt wird von YouTube ein iFrame zum einbinden.

<iframe width="560" height="315"
 src="https://www.youtube-nocookie.com/embed/hZAt29lHMeo?controls=0" 
 frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
 allowfullscreen></iframe>

Wird dies in der Form integriert, reagiert es nicht auf Größenänderungen des Fensters, sondern ein Scroll-Balken erscheint, wenn zu wenig Platz vorhanden ist!

Allerdings fehlt hier die Möglichkeit dies für Responsive Webdesign zu bekommen!

Hier kommt ein Kniff zum Einsatz. Wir erweitern den HTML-Code um den Klassennamen beim iFrame und packen einen Container darum herum.

Somit bekommt der iFrame die Klasse .videoExtern mit der absoluten Positionierung und ein Element mit der ID #videobereich1 als Container darum herum.

<div class="videobereich">	
<iframe class="videoextern" width="640" height="360"
 src="https:///www.youtube-nocookie.com/embed/hZAt29lHMeo?rel=0"
 frameborder="0" allowfullscreen></iframe>
</div>

Folgende CSS-Anweisungen bewirken die Magie:

.videobereich {
    background-color: orange;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}

.videoextern {
    background-color: yellow;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Die Klasse .videoExtern überschreibt die Werte des iFrame im HTML von bisher 640 und 360 (Zahlen aus Beispiel) mit den CSS-Anweisungen width: 100%; und height: 100%;.

Jetzt kommen die Größen des Containers darum herum zum Tragen. Und dieser benötigt eine Höhe, die wir über das padding-bottom prozentual festlegen.

Das Seitenverhältnis des Videos wird über das padding-bottom: mitgegeben. Hier ist die Berechnung Beispielweise

9 / 16 * 100% = 56,25%

Beziehungsweise mit den Zahlen vom Beispielvideo:

360 / 640 * 100% = 56,25%

Den fertigen Code gibt es zum Testen unter:
https://www.html-seminar.de/rwd/responsive-webdesign-externe-videos-einbinden-beispiel.htm

Falls jemand tiefer in das gelöste Problem einsteigen mag – es lag an dem Standardverhalten der iFrames, die ohne Angaben immer 300 Pixel auf 150 Pixel dargestellt werden. Somit haben wir über eine direkte Anweisung von 100% Höhe kein Erfolg. Das nur am Rande.