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.
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-