Ein Vimeo oder YouTube Video “responsive” einbinden


“Responsive” Webdesign ist heute in aller Munde. Um es auch den Schlagwort-Unwissenden kurz zu erklären: “Responsive” bedeutet in Bezug auf eine Internetseite im Prinzip nur, dass sich Layout und Design selbstständig an die Größe des Displays des Nutzers anpasst, egal ob dieser nun mit einem Handy, einem Tablet PC oder einem normalen Monitor surft. Es gibt also nicht mehr, wie in den Anfängen des mobilen Webdesigns, extra Versionen der Internetseite für Handys und andere Geräte, sondern nur eine Version. Das ist zeitsparend, da nicht verschiedene Versionen entwickelt und betreut werden müssen und zukunftssicherer, da die Seite auch automatisch mit der nächsten Generation von Mobiltelefonen funktioniert.
Wichtig ist dabei jedoch das sich alle verwendeten Elemente skalieren lassen. Das ist mit Hilfe von CSS in Bezug auf Bilder und Texte kein Problem. Bei einem meiner Projekte tauchte aber gerade die Frage auf: Wie sieht es mit einem durch ein <iFrame> eingebundenes Vimeo Video aus? Kann dieses auch dynamisch die Größe verändern, je nach Auflösung und Größe des Browserfensters? Aufgabe war es ein Video einzubinden mit einer maximalen Breite von 1600px, dass ich dann aber dynamisch bis auf 320px verkleinern läßt.

Das Problem:
Generell ist es kein Problem einen <iFrame> per CSS die Breite und Höhe von “100%” zu geben. Der iFrame ist also immer so gross wie möglich und nimmt die Größe des umgebenden DIV Containers an. ABER: Das Seitenverhältnis bleibt nicht immer das gleiche wenn das Browserfenster nur horizontal oder vertikal vergrößert oder verkleinert wird, bzw. das vom User genutzte Display ein anderes Seitenverhältnis aufweist. ERGEBNIS: Entweder gibt es oben/unten oder links/rechts einen häßlichen Abstand sobald das Video skaliert wird.

Meine eigene Lösung beruht im Prinzip auf dem Grundgedanken von Thierry Koblenz, der bereits im Jahr 2009 eine Lösung auf A List Apart veröffentlicht hat, noch bevor das Schlagwort “responsive” überhaupt eine Bedeutung für uns User Interface Designer hatte.

Die Lösung:
Den “Embed” Code umgibt man mit einem zusätzlichen DIV Container. Wie z.B.:

<div class="responsive-video">
<iframe src="http://player.vimeo.com/video/47387431?title=0&amp
;byline=0&amp;portrait=0&amp;autoplay=0"
width="1600" height="900" frameborder="0" webkitAllowFullScreen
mozallowfullscreen allowFullScreen></iframe>
</div>

Über diesen kann man zunächst den iFrame ansteuern und in der Grösse anpassen:

.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Und dann in einem zweiten Schritt den Abstand des iFrames nach unten in das relative Verhältnis der Videogröße setzen:

.responsive-video {
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;
}

Der Abstand nach unten von 56.25% entspricht dem Verhältnis von 16 zu 9 (9 / 16 (x 100) =56.25%). Der DIV Container hat also immer eine Höhe von 0px + 56.25% im Verhältnis zur Breite. Oder mit anderen Worten: Der Container ist immer im 16:9 Format, genauso wie das Video, das wiederum die Grösse des iFrames hat, welcher immer 100% der Höhe und Breite des umgebenden DIV Containers hat.

Klingt kompliziert, ist es aber eigentlich gar nicht. Als Beispiel: Wird ein Video mit einem anderen Seitenverhältnis eingebunden muss nur der “padding-bottom” Wert geändert werden. Ist das Verhältnis beispielsweise 2:1 ergibt das einen Abstand von 50% (2/1 (x 100)=50%) nach unten.
Dies klappt sowohl mit Vimeo als auch mit YouTube Videos. Die Videos skalieren danach sauber in der Größe mit ohne das ein häßlicher Balken bzw. Abstand entsteht.

88 thoughts on “Ein Vimeo oder YouTube Video “responsive” einbinden

  1. Guten Tag
    ich bin ein Neuling auf dem Thema und wollte mein Video genau so einbetten das es auf der mobilen Version an die Bildschirmgrösse angepasst wird. Hier müsste ich eigentlich die Lösung finden so wie ich das sehe, weiss aber nicht wie ich genau den Code anwenden muss.
    Ich möchte dieses Video http://www.youtube.com/watch?v=sXssCDrR7tE in Joomla 3.3.1 einbetten.
    Können Sie mir sagen wie der Code schlussendlich aussehen sollte?

    1. Hallo!
      Sie müssen nur Ihren „Einbett Code“ von YouTube in einen DIV Container mit der Klasse class="responsive-video" einbauen.
      Dann die beiden im Artikel genannten CSS Klassen in Ihre CSS Datei einbauen.
      Das Verhältnis von 560 zu 315 Pixeln ihres Videos entspricht bereits dem Verhältnis von 16:9. Die beiden CSS Klassen können also einfach per Copy&Paste übernommen werden.

  2. Hallo,
    tolle Sache – nur möchte ich kein Video einbinden, sondern eine html Anwendung (externe Seite) über das iframe öffnen. Dies funktioniert auch, aber die externe Seite passt sich nicht dem iframe an. Das iframe aber der Bildschirmgröße. Gibt es dazu eine Lösung?

    1. So ein iFrame ist im Prinzip nichts anderes als ein „Fenster“ durch das man eine andere Internetseite sehen, aber nicht manipulieren kann. Dazu müßte die andere Seite komplett auch responsive sein bzw. deren Größe auf 100% gesetzt sein

  3. Hallo,

    super Sache! Danke!

    wenn ich jetzt noch wüsste, wie man den iframe dann auf der Seite zentrieren kann…

    „margin: 0 auto;“ hat nicht funktioniert… Bin nicht der Beste im Bereich CSS… Vielleicht kann mir ja jemand schnell helfen?

    Vielen Dank auf jeden Fall!

    1. @Mi:
      Hallo!
      Wurde der iFrame oder der umgebende DIV Container auf „margin:0px auto“ gesetzt? Gibt es das Beispiel irgendwo zusehen(URL)? Kann an vielerlei Dingen liegen…

  4. Hallo Holger,
    genau das war die Lösung… 🙂 Ich weiß nicht, was ich alles probiert habe, um das irgendwie hin zu bekommen, aber jetzt passt es. Super! Vielen Dank.
    Viele Grüße aus Hannover,
    Kristina

  5. Hi,

    erstmal Danke, funktioniert ganz gut – aber leider nur bis zu einer gewissen Mindestgrösse. ich komm einfach nicht dahinter, wieso es nicht weiter geht…

    Website ist noch in Bearbeitung aber über diesen Link ist die Problemstellung sichtbar:
    http://www.canyonauten.de/canyoning-starzlachklamm/index.php?stylesheet=handheld

    Vielleicht ist da Problem ja schon bekannt und jemand kann mir helfen…
    Alles wurde exakt so eingebunden, wie es hier beschrieben wird.

    Danke im voraus!

  6. Hallo Holger,

    ertsmal vielen Dank für den tollen Artikel. Leider bin ein Laier und nutze zur Zeit Joomla 3x und VM 3x. Ich habe darfür eine Modul (html in einem WYSIWYG-Editor) für iframe von youtube-video im Joomla erstellt. Mit dem Einbetten von youtube-video hat es einwandfrei funktioniert. Nun möchte ich auch Responsiv für diese Modul haben. Ich habe versucht in der style.css des jeweiligen Template deine Codes eingefügt:

    .responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    .responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* Default for 1600×900 videos 16:9 ratio*/
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    }

    Jedoch funktioniert es nicht. Könntest Du mir sagen wo ich diese Codes einfügen soll? Also in welcher CSS-Datei.

    Über Deine Unterstützung freue ich mich sehr.

    Vielen Dank im Voraus

    Thien

    1. Hallo! Ohne zu wissen was du für ein Template wie nutzu und wie genau und auf welcher Seite der iFrame eingebunden wurde kann ich dir leider nichts dazu sagen. Hast du ein Link direkt zu der Seite auf der du das Modul mit meinem Code eingebunden hast?

  7. hat prima geklappt .
    Nur im Vollbildmodus und NUR in Verbindung Mac/Safari ist das rechte und linke Drittel des Vimeo Videos abgeschnitten. Alle anderen Varianten (Mac/Firefox oder Win7/ Safari) funktionieren einwandfrei. Falls es für eine Klärung noch wichtig ist: das verwendete Template ist “Halcyon Days”.
    In der Hoffnung auf eine Lösung

    Schöne Grüße aus dem 7-Gebirge

    Werner

  8. Hi Holger,

    perfekt, habe es gerade auch bei meinem WordPress-Blog hinbekommen. Obwohl ich eher Redakteur als Techniker bin. Ich musste allerdings vor dem .responsive-video […] noch jeweils ein
    #middlecontent
    schreiben – ich vermute, das ist wordpress- oder theme-spezifisch?

    Viele Grüße und Danke

    Josh

    1. Scheint kein embed Code von Youtube oder Vimeo zu sein. Ich tippe mal auf die Parameter am Ende: &w=1280&h=720
      Die geben eine feste größe und Breite mit, was dann wiederum die CSS Angaben überschreibt. Kannst mal versuchen die einfach weg zu lassen. Wenn die allerdings Pflicht sind dürfte es problematisch sein…

    1. Klingt danach als ob irgendwas in deiner CSS Datei da was überschreibt/zurücksetzt etc. Kannst du eine URL zu der Seite posten in der du versucht hast das Ganze einzubinden?

  9. Genau das habe ich für die Lösung eines Problems gesucht und das es auch noch auf Anhieb funktioniert, macht die Sache perfekt.
    Vielen Dank für den hervorragenden Beitrag!

  10. Hallo, ich habe derzeit leider auch das Problem!
    Bin aber wohl auch jemand bei dem das nicht funktioniert.
    Habe mich bis jetzt auch nicht anders zu helfen gewusst, als das Video in ein Widgetkit einzubauen, somit ist zumindest der Rahmen responsiv. Das Video aber leider nicht.
    Habe alles so gemacht, wie es beschrieben wurde. Da ich nicht wusste in welche CSS Datei die Definition des Divs gepackt werden soll, habe ich das in alle 3 vorhandenen CSS Dateien getan. Ohne Erfolg!
    Können Sie mir weiterhelfen?

    Gruß, Ronny

  11. Hallo,
    leider funktioniert es bei mir nicht richtig.
    Gibt es einen einfachen Code, wie ich ein iframe einbette, damit das Video mobile und auch am Rechner automatisch angepasst wird?
    Besteht die Möglichkeit, dass man hier den Code wie er nachher fertig aussieht, rein stellt?

    Vielen Dank

  12. danke!

    „Der DIV Container hat also immer eine Höhe von 0px + 56.25% im Verhältnis zur Breite.“
    wenn padding-bottom: 56,25% ist, dann bezieht sich dass auf die breite?
    wenn ich beispielsweise width: 50% mache, dann beziehen sich die 50% doch auf die width des umgebenden containers, oder?
    also ist die verhaltensweiseweise von prozenten bei padding und width anders?
    oder sehe ich das falsch?
    lg, clemens

  13. Erst mal vielen Dank für den super Artikel! Hat mir enorm geholfen, ich bin jedoch auf ein kleines Problem gestoßen! Ich habe mein Video max-height und max-width gegeben damit es nicht full-screen ist und habe darauf natürlich geachtet das das Verhältnis 16:9 ist. Hat auch alles super geklappt jedoch wird padding-bottom unter dem Video angezeigt bzw. es entsteht jetzt ein großer Abstand zum nächsten unteren Element. Meine Lösung war das ich ein weiteren div außerhalb erstellt habe und dabei height auf die gleich Höhe definiert habe wie max-height. Da es sich um ein px Wert handelt bleibt die Höhe auch gleich und passt sich nicht an wenn das Fenster kleiner wird.
    Ich müsste dann media-queries benutzen um den Abstand zu reduzieren gibt es eine elegantere Lösung dafür?
    Vielen Dank im Voraus!

    html

    css
    .out-videowrapper {
    width: 100%;
    height: 320.625px;
    margin: 0 auto;
    }
    .videowrapper {
    position: relative;
    padding-bottom: 56.25%; /* Default für 1600×900 Videos 16:9 ratio*/
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    }
    .videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    max-width: 570px; /* 16:9 Verhältnis */
    max-height: 320.625px; /* 570 / 16 * 9 */
    }

  14. Ich habe folgeden Lösung mit JavaScript – jQuery Plugin FitVids.js verwendet:

    Einfach das Plugin hier downloaden: http://fitvidsjs.com/ und in eure Seite einbinden. Das Plugin basiert auf jquery, welches zudem noch auf die Seite miteingebunden werden muss.
    Dann müsste ihr noch in einem weiteren Scriptelement das Plugin aufrufen.
    Hier mein Beispielcode:

    Flexible Video

    Flexible Video

    $(„.videobox“).fitVids();

    Viele Spaß damit 😉

  15. Hallo Holger,
    besten Dank für Deine Anleitung…. nur weiß ich nicht in welche CSS Datei und darin dann an welcher Position ich die folgende Angaben setzen soll:

    .responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    und

    .responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* Default for 1600×900 videos 16:9 ratio*/
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    }

    Besten Dank im voraus!
    MFG
    Chipiron

    1. Naja, in eine CSS Datei die deine Seite benutzt. Welche das ist kann ich dir natürlich nicht sagen, da ich deine Seite nicht kenne.
      An welcher Stelle ist im Prinzip egal, um Probleme zu vermeiden aber am besten ganz unten rein.

  16. Ich hatte mich schon darüber gefreut endlich eine gute Lösung zum responsiven Einbetten von Videos gefunden zu haben, aber leider funktioniert diese Lösung nicht im Firefox. Im Firefox werden die iframes einfach gar nicht mehr angezeigt. In allen anderen Browsern klappt es 1a.
    Hast du eine Idee, woran das liegen könnte?

    Viele Grüße,
    Kerstin

    1. Hallo!
      Ich habe hier mal das Beispiel bei Codepen abgelegt:
      http://codepen.io/holger1411/pen/oBXbBo
      Genau der Code funktioniert super in FF.
      Daher liegt es entweder an einem Browser Plugin, dem iFrame selber den du einbinden willst, oder z.B. bestimmten Sicherheitsrichtlinien der Seite in die den iFrame einbinden willst.

      Guck mal nach ob der Link oben richtig angezeigt wird.Dann weißt du schon mal mehr.

  17. Hallo Holger,
    vielen Dank für dein Super-Tipp!
    Es funktioniert auf dem Smartphone super. Leider wird auf dem Browser jetzt das Video quadratisch angezeigt, da oben und unten ein schwarzer fetter Balken eingefügt wird. Das Video selbst bleibt 16:9, nur diese Balken kommen hinzu, wodurch der ganze „Videokasten“ quadratisch wird. Erst wenn ich den Browser schmaler ziehe, verschwinden die Balken langsam.
    Hast du da eine Idee?
    LG
    Felix

  18. Okay, jetzt hab ich doch noch eine Frage.
    Der Code funktioniert wunderbar, jedoch werden ja jetzt die Videos auch immer zu 100% angezeigt, was beim normalen Browser am PC ziemlich groß ist!
    Gibt es eine Art Beschränkung, die man einfügen kann, damit das Video eine gewisse Pixel-Größe nicht überschreitet?

  19. Bei mir geht das leider nicht (Forum)

    Auf dem Smartphone werden die videos schon angepasst aber auf dem Deskop bekomme ich sehr große Videos, möchte aber nur 640×360

  20. Guten Tag,
    Ich bräuchte mal Hilfe, ich möchte meine Videos auf der Website, in einer Vierer Reihe anzeigen lassen.
    mein Problem, ich bekomme es nicht hin, dass die Videos wirklich passend Responsive angezeigt werden. Hierbei geht es nur um die Desktop Version. Die Mobile Version besteht im Grunde schon.

    Vielen Dank schon einmal.
    Gruß Markus

  21. Funktioniert super, am besten noch mit diesem kleinen jQuery Schnipsel verbinden um YouTube und Vimeo Videos in alten Beiträgen etc. automatisch responsive zu bekommen.

    jQuery(function($) {
    var $all_oembed_videos = $(„iframe[src*=’youtube‘], iframe[src*=’vimeo‘]“);
    $all_oembed_videos.each(function() {
    $(this).removeAttr(‚height‘).removeAttr(‚width‘).wrap( „“ );
    });
    });

  22. Die Anleitung hat hervorragend auf unserer Website funktioniert. Ich habe sie eingesetzt um unsere Produktvideos optimal einzubetten. Hat mir sehr viel Zeit gespart. Von daher besten Dank für die saubere Lösung via CSS.

  23. Funktioniert bei mir nicht. )-: keine Ahnung, woran es liegt… wenn ich die Zhalen aus dem Quellcode rausnehme wird es immer klein angezeigt, wenn nicht, immer groß. Mist. )-:

  24. Hallo Holger,
    obwohl der Artikel schon ein paar Tage alt ist, hat er uns sehr geholfen.

    Vor allem iVm meinem Theme konnte ich das Video besonders „passend“ einfügen.

    Danke nochmal & Grüße

    Chris

  25. Klingt für mich schlüssig. In einer Webseite, die ich inhaltlich pflege (Drupal), machen wir das auf erfolgreich so. Auf einer anderen Seite (CMSimple-CMS, eigener Server) wollte ich das jetzt so einrichten, es klappt aber einfach nicht. Das CMS ignoriert das .responsive-video und den zugehörigen CSS-Eintrag scheinbar und zeigt das Video immer in der angegebenen Größe. Ich vermute, dass man noch sonst irgendwo etwas in den Seiteneinstellungen freischalten muss – evtl. anderswo in der CSS oder in der Template-Datei? Hat jemand damit Erfahrungen?

  26. Der Artikel ist schon was älter, aber die Lösung ist nach wie vor top aktuell. Vielen Dank dafür! Es funktioniert bestens. Ich habe gerade Youtube Video nach DSGVO in einem Shop eingebunden. Falls jemand braucht der Code dafür:

    Und CSS Lösung von oben verwenden.

  27. Auch von mir ein Dankeschön! In Chrome funktioniert das super. In anderen Browsern wurde mit dennoch immer wieder ein 5px schmaler schwarzer Rand über dem Video angezeigt.

    Abhilfe für alle die das gleiche Problem haben: .rll-youtube-player {margin: 0px !important;}

Schreibe einen Kommentar

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