“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.

Bisherige Kommentare (Selber ein Kommentar hinterlassen)

  • Fabian sagt:

    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.

  • John sagt:

    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( „“ );
    });
    });

  • 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

  • PrinzBloebb sagt:

    @Felix

    Versuche mal max-width: 600px;

    Gruß Prinz

  • FB sagt:

    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

  • Holger sagt:

    Mach einen weiteren Div Container drumherum der z.B. nur 50% groß ist. Hängt aber davon ab was du wo auf welchen Monitoren wie anzeigen willst.

  • Felix sagt:

    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?

  • Felix sagt:

    …hat sich erledigt, lag an meinem WordPress-Theme ;)

  • Felix sagt:

    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

  • rey sagt:

    DANKE!
    GROßARTIG!

  • Nerviges Thema, grandioser Tip.

    Danke und 5 Sterne *****

  • Holger sagt:

    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.

  • Kerstin sagt:

    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

  • Thore Olaf Kühn sagt:

    Herzlichen Dank für die Lösung und den Code. War in 2 Minuten umgesetzt.
    Thore

  • Susen sagt:

    PERFEKT!
    Vielen lieben Dank für diese einfache und sichere Hilfe!

  • Mike sagt:

    Setz einen Spenden-Link unter Deine Anleitung! Ich würde sofort drauf buzzen! :)
    Einfach genial. Danke!!

  • Sam sagt:

    Wer sich einfach das entsprechende HTML Snippet generieren lassen möchte: https://www.t3premium.de/video-generator/

    1. Video URL einfügen
    2. Responsive HTML Code generieren

    Funktioniert mit YouTube, Vimeo, Vine und Dailymotion

  • Frank sagt:

    Toller Tipp, hat direkt funktioniert , ich danke für diesen sehr nützlichen Hinweis.
    Frank

  • Klaus sagt:

    Kann man das auch für eine responsive Bildergalerie zum einbetten in eine responsive Seite verwenden?

  • … ein traum !!!
    das habe ich schon immer gesucht.
    ich habe bei meinem Joomla 3.6.0 die funktionen in der bootstrap.css verankert – es laeuft !!
    vielen dank !

  • Matthias sagt:

    fixe googeley, direkt das passende Ergebnis, einfach, schnell, frickelfrei, sauber. Vielen Dank :)

  • Hannes sagt:

    Geil, hat sofort funktioniert, sehr hilfreich, vielen vielen Dank
    Hannes

  • Lukas sagt:

    wie amche ich das bei jimdo, wenn ich null ahnung von programmieren habe? :D

  • Holger sagt:

    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.

  • Chipiron sagt:

    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

  • Vielen Dank, ich habe seit der Umstellung auf ein anderes Theme Probleme mit der Anpassung gehabt, hiermit hast du mir sehr geholfen! :)

  • Fabi sagt:

    VIELEN DANK!!!!!!!!!!!!!!!!!!! :)

  • hans sagt:

    danke

  • Michael sagt:

    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 ;-)

  • 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 */
    }

  • Jonas Lauerbach sagt:

    Vielen Dank, das hat mein Problem ganz schnell gelöst!

  • Holger sagt:

    Genau. Padding steht immer in Relation zum eigentlichen Element, width zum umgebenden Element

  • einserpasch sagt:

    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

  • Die Lösung hat auf Anhieb geklappt. Wieder ein Problem weniger. Danke

  • „Nur Wissen weitergeben macht unsterblich.“
    Vielen Dank Holger für die am Ende doch mathematisch-logische Lösung.
    Ganz Super!
    page gebookmarked ;-)

  • Sascha sagt:

    Super Lösung! Simple und clever :-). Danke dafür!

  • Holger sagt:

    Das ist der HTML und der CSS Code von oben aus dem Artikel. Einfacher geht es leider nicht.

  • SK sagt:

    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

  • Holger sagt:

    Klar, ich bräuchte allerdings den Link zu der Seite auf der der CSS Code und das Video eingebunden sind.

  • 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

  • Denis Kaiser sagt:

    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!

  • Danke sehr!
    Eine wirklich gute und funktionierende Umsetzung!
    Wir werden es für unser neues responsives Template einsetzen.

    Gruß Carsten

  • Johannes sagt:

    Hab einige Sachen mit javaScript ausprobiert – funktioniert alles nicht oder nur teilweise.
    Das hier ist einfach nur: einfach und genial!
    Danke!
    LG
    Johannes

  • Robin sagt:

    Super Lösung. In zwei Minuten umgesetzt.

    Danke für die Anleitung

  • SirROG sagt:

    Vielen Dank für dieses einfache und gut erklärte Tutorial. Klappt prima :)

  • Nurgül sagt:

    Hat geklappt. Danke!

  • Steff sagt:

    Danke hat geklappt :)

  • Lars sagt:

    Hab,s in unsere mobile Website eingebaut und… Hammer!
    Tausend Dank für diese Lösung. Mega stark.

  • Holger sagt:

    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?

  • Nicolas sagt:

    Hey Holger,

    Hab’s probiert wie du beschrieben hast. Jedoch bleibt bei mir der Bereich leer. Hab auch schon alle anderen Möglichkeiten von http:// avexdesigns.com/responsive-youtube-embed/ und http://embedresponsively.com/ ausprobiert. Immer das gleiche.

  • Holger sagt:

    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…

  • John sagt:

    Lieber Holger,
    ich bekomme als Code folgendes mit: http://www.xxxxx.at/api/hls/embed?t=75671MTV1445637218495825424&w=1280&h=720
    nicht das Div ist das Problem, sondern das Bild vom iframe. Eine Idee warum?
    Danke, John

  • Holger sagt:

    Ja, die ID #middlecontent ist nichts WordPress spezifisches. daher dürfte die aus dem Theme kommen

  • Josh sagt:

    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

  • Werner sagt:

    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

  • Holger sagt:

    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?

  • Thien sagt:

    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

  • Vielen Dank für den klasse Artikel! Funktioniert perfekt.

  • Hiro sagt:

    Danke Holger!
    Sowas habe ich gesucht =)
    Lg
    Hiro

  • Chris sagt:

    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!

  • Holger sagt:

    @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…

  • Holger sagt:

    Freut mich zu hören. Und viele Grüße zurück aus Hannover;-)

  • Kristina sagt:

    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

  • Mi sagt:

    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!

  • Hans Spieß sagt:

    Der Vollständigkeit halber sei noch auf die jQuery-Lösung verwiesen, falls man verschiedene Ratios verwendet und dem Redakteur keine Basteleien zumuten möchte:

    http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

    Verbesserte Version (liest container.width() automatisch): https://gist.github.com/klx-hansspiess/64eed56ac1e63c82dde0

  • Holger sagt:

    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

  • Daniel sagt:

    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?

  • Simon sagt:

    Danke!!!

  • Peter sagt:

    Super Artikel! Danke!

  • Holger sagt:

    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.

  • KoPro sagt:

    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?

  • Adelbert sagt:

    Danke,
    tolle Lösung! Habe ich sofort eingebaut.
    Funktioniert!
    MfG
    Adelbert

  • Oliver Hoerr sagt:

    Super Arktikel.
    Schlauer Gedanke und Simple Umsetzung.
    Ich habe es selber gleich fuer meine website benutzt.
    mfg Oliver


Kommentar schreiben (* Pflichtfelder)