Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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

externe Videos einbinden in Responsive Webdesign
externe Videos einbinden in Responsive Webdesign

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

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

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 :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

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:

Fehler melden

Vielen Dank für Ihre Hilfe