Blog

Lesen Sie die letzten Artikel

Ein YouTube Video in eine Responsive Seite einbinden

Im heutigen Beitrag befassen wir uns mit dem Einbinden eines YouTube Videos in eine Homepage im Responsive-Design.

YouTube Videos lassen sich normalerweise ganz einfach über ein iFrame einbinden, in welchem man eine feste Breite und Höhe des iFrames definiert. Diesen iFrame-Code kann man, wenn im Video auf YouTube freigegeben, ganz einfach auf YouTube kopieren und man kann sogar noch die Größe bei YouTube einstellen. Nun bauen wir diese iFrame bei uns in den Blog oder die Seite ein, funktioniert auch einwandfrei, auf Seiten mit einer festen Breite.

Da wir aber eine Responsive-Seite haben, welche sich je nach Bildschirm in der Breite verändert, haben wir mit den fesetn Größenangeben aber nun ein Problem. Das Video würde in manchen kleinern Bildschirmen das Layout sprengen und den Inhaltsbereich sehr wahrscheinlich überschreiten, was natürlich sehr unschön aussieht und auch zu Fehlern in der Bedienbarkeit führen kann.

Es gibt hierfür aber eine Lösung!

Die Lösung ist relativ einfach, wir bauen um das iFrame einfach ein DIV und formatieren das Ganze Konstrukt dann per CSS.

HTML Markup:

<div class="video-container">
<iframe width="640" height="360" src="//www.youtube-nocookie.com/embed/vArGJLLdWh8?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

Benötigte Angaben im CSS:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Das fertige Ergebnis würde dann zum Beispiel so aussehen:

Wenn euch das Tutorial weitergeholfen hat, dann empfehlt es doch bitte weiter.

Wir wünschen euch viel Spaß beim ausprobieren!

Peter Gierak arbeitet als Teamleiter IT-Entwicklung bei Staudigl-Druck GmbH & Co. KG in Donauwörth. Nebenberuflich erstellt er mit seiner MEDUO Medienagentur Webseiten für kleinere Kunden.
  • 4720 Aufrufe

2 Kommentare

  • Tobi

    12. November 2014 um 16:52

    bei dem div code fehlt id=“videocontainer“ ;)

    • Peter Gierak

      19. November 2014 um 23:30

      Vielen Dank für die Info.
      Habe es gleich ausgebessert :)

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Sie können folgende HTML Tags and Attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Ich habe die Datenschutzerklärung zur Kenntnis genommen. Ich stimme zu, dass meine Angaben und Daten zur Beantwortung meiner Anfrage elektronisch erhoben und gespeichert werden.