Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Flexible Videos im Responsive Webdesign

Wenn Ihr eine Website mit Media Queries für mobile Endgeräte optimiert und eingebettete Videos von YouTube, Vimeo und Co. verwendet, werdet ihr recht schnell merken, dass es hier ein Problem gibt. Das Layout passt sich zwar flexibel der Breite des Displays bzw. des Monitors an, das Video reagiert auf die CSS-Angaben jedoch nicht und behält seine feste Größe. In der mobilen Version seht ihr dann entweder ein abgeschnittenes Video oder einen in die Breite gedrückten Inhaltsbereich.
Ich möchte euch zwei Lösungen zeigen die dieses Problem beheben.

Responsive Videos mit jQuery-Plugin: FitVids.js

Die erste Lösung die ich euch vorstellen möchte ist das auf jQuery basierende Script FitVids.js von Chris Coyer und Paravel.

kulturbanause-responsive-video-ipad

Ladet euch das Download-Paket von GitHub herunter und bindet jQuery und FitVids.js in eure Seite ein. Anschließend müsst ihr nur noch den Container des Videos (z.B. .content) manuell angeben. Den Rest erledigt das Script automatisch, indem es jedes Video mit ein paar umschließende CSS-Containern ausstattet.

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

Responsive Videos ohne Plugin: Die manuelle CSS-Lösung

Wer kein Script benutzen möchte kann Videos natürlich auch manuell um den notwendigen Code erweitern. Die Lösung funktioniert ähnlich wie für Bilder in festgelegtem Seitenverhältnis. Zunächst einmal müsst ihr alle Videos im HTML-Quellcode mit einem div-Container umschließen.

<div class="responsive-video">
  <!-- hier steht der Embed-Code des Videos -->	
</div>

Mit folgendem CSS-Code passt ihr das Video in der Breite immer dem umschließenden Container an. Also üblicherweise dem Content.

.responsive-video {
	position: relative;
	padding-bottom: 56%; /* 16/9 Video */
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

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

Wenn ihr das Video in der Breite begrenzen möchtet, müsst ihr einen weiteren, umschließenden Container mit fester Breite verwenden.

Ich habe eine simple Demo-Datei erstellt die beide Varianten enthält. Ihr könnt euch die Demo hier anschauen:

Demo anschauen

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 27 Kommentare

  1. Nils
    schrieb am 10.10.2018 um 13:44 Uhr:

    Hey Jonas!

    Tausend Dank für diesen Artikel! Ich habe mich für die Lösung mit dem div-tag entschieden. Und damit automatisch um alle meine iframes ein entsprechendes div-tag erzeugt wird, habe ich in die footer.php noch folgenden script hinzugefügt:

    jQuery( „.post iframe“ ).wrap( „“ );

    Vielleicht hilft es ja auch anderen weiter…

    Antworten
    • Nils
      schrieb am 10.10.2018 um 13:46 Uhr:

      naja… eigentlich steht bei wrap noch das entsprechende div-tag, aber es wird hier nicht angezeigt…

      Antworten
  2. Dirk 100mark
    schrieb am 09.03.2015 um 08:22 Uhr:

    Hallo,

    erstmal vielen Dank für diese SPITZEN Anleitung!!!!!

    Was ich noch festgestellt habe: Ist das richtig, dass das Video SOFORT
    anfängt zu spielen? Hab versucht ein autoplay einzubauen…hatte aber
    leider keinen Einfluss.

    Noch eine Idee, wie man ein Menü einblendet und das Video nicht automatisch
    startet? Vielen Dank.

    Gruß
    Dirk

    Antworten
  3. Andy Wischer
    schrieb am 08.02.2014 um 00:58 Uhr:

    Wunderbar nun habe ich ein Responsives Webdesign incl. iframe video. Schön das Du gleich object und embed im css mit drin hast, da passt dann wirklich alles. Danke für die arbeit ***

    Antworten
  4. Fighter
    schrieb am 20.11.2013 um 08:39 Uhr:

    Danke für den klasse Tipp, super das du deine Infos hier teilst. Genau danach habe ich gesucht. Habe auch schon anderweitig von dir profitiert. Manchmal kann ich nur über einem Rechner mit einem alten IE (7 oder 8) da ist der Texthintergrund schwarz und sehr schwer zu lesen.

    Übrigens hier noch eine gute Seite zu dem Thema: http://maddesigns.de/meta-viewport-1817.html

    Suche noch ganz dringend einen Tipp wie ich eine MP3 file responsive einbinden kann (soll nur bei der Desktopvariante spielen, nicht auf den Handys – da ich dort bisher bei Tests eh keinen Sound hatte?).

    Ich arbeite übrigens bei den Media-Querys auch mit der Auflösung, hier für Desktop:

    @media only screen and (min-width:992px) and (max-resolution: 110dpi)

    Zum Testen verwende ich das Firefox-AddOn WebDeveloper 1.2.5, dort die Funktion: Größe ändern/Angepasste Layouts verwenden.
    Dazu hab ich mir unter:
    Einstellungen/Einstellungen…/Angepasst –> meine bevorzugten Device-Größen (12 Stück) gespeichet und über:
    Einstellungen/Einstellungen…/Tastatur –> eine Tastenkombination zugeordnet (sonst ist es zu umständlich per Kontextmenü) – bei mir klappts mit ALT+UMSCHALT+M

    Um eine ungefähre Vorstellung von der Größe des Handys zu bekommen (und eine höhere Auflösung zu simulieren) verkleinere ich die Darstellung dann mit STRG+MINUS (2 x im Tastenblock). Funktioniert nicht 100% da ja mein Screen ja die Aulösung nicht hat um die Schrift korrekt darzustellen und so Umbrüche entstehen die auf den ECHTEN Handys :-) nicht vorkommen.

    Funktioniert aber nur mit „min-width“ nicht mit „min-device-width“ (ebenso min/max-resolution) -> wenn man damit arbeiten will, erst nach fertigen Tests (am Desktop) in die css einarbeiten!

    Hoffe das nutzt jemanden. ;-)

    Antworten
  5. Michael
    schrieb am 20.06.2013 um 22:18 Uhr:

    Klasse Lösung!
    Dafür herzlichen Dank.

    Antworten
  6. seherpsalms
    schrieb am 18.06.2013 um 12:59 Uhr:

    Hallo Jonas Hellwig,
    hier in Deinem Blog bin ich endlich auf die richtige Spur gekommen mit responsive Videos. Wir haben ein Musikprojekt und dort habe ich auf der Startseite eine swf-Datei die von allein startet. Ich stelle unsere website gerade auf „responsive“ um und konnte durch deinen Blog die swf-Datei schon mal responsive einbinden. Super!
    —> Mein Problem: Das ganze wird im IE8 nicht angezeigt. Ich habe Deine CSS-Lösung verwendet und sie funktioniert im IE9 prima, jedoch nicht im IE8. Im IE8 wird die Datei nur in der Smartphone-Größe im Browser überhaupt angezeigt, ab Tablet-Größe erscheint sie gar nicht.
    Gibt es da einen Hack, oder wo muss ich noch was ergänzen? Oder sollte ich die swf-Datei mittels iFrame einbinden? Hier mal der Link zum Prototyp: http://seherpsalms.net/test/korrektur.html
    Gruß
    Christoph Seher

    Antworten
  7. grafix
    schrieb am 22.05.2013 um 23:47 Uhr:

    Allerbesten Dank nochmal,
    für das Topic und die Zusatzinfo.

    Antworten
  8. grafix
    schrieb am 22.05.2013 um 16:59 Uhr:

    Klingst sehr gut, werde
    es gleich ausprobieren!

    Noch eine Frage:
    wie kommt es zu diesen Werten?

    padding-bottom: 56%;
    padding-top: 30px;

    Danke!

    Antworten
    • Jonas Hellwig
      schrieb am 22.05.2013 um 23:40 Uhr:

      Im Grunde genommen hat es mit der Umrechnung des 16:9-Verhältnisses zu tun. 9/16 = 56,25. Aber ich habe mich mit der genauen Funktionsweise noch nicht beschäftigt. Hier wirst du fündig: Creating Intrinsic Ratios for Video – A List Apart

      Antworten
  9. Jonas
    schrieb am 02.04.2013 um 19:56 Uhr:

    Hi, vielen Dank für den nützlichen Beitrag.
    Lässt sich diese Methode auch ausweiten auf Adobe Edge Animate HTML 5 Kompositionen? Diese sind in Object eingebunden.

    Wie hier: http://goo.gl/Evr2r

    Weil ich habe das Problem, dass ich zwar diese Kompositionen einfügen kann, auch responsive, aber die Höhe immer gleich bleibt. (Also die divs drunter haben zb immer einen Abstand von z.B. 600px) – je schmaler die Auflösung in der Breite, desto höher wird dann immer mein Abstand.

    Bei deinem Beispiel ist das Problem ja nicht vorhanden. Aber ich blicke da noch nich ganz durch… :)

    Wollte ich nur mal Fragen

    Antworten
    • Jonas Hellwig
      schrieb am 03.04.2013 um 08:43 Uhr:

      Hallo Jonas,

      was Edge Animate angeht bin ich leider nicht im Thema, da kann ich dir nicht weiterhelfen. Sry.

      Antworten
      • Jonas
        schrieb am 03.04.2013 um 10:49 Uhr:

        Also eigentlich wollte ich nur fragen, ob das auch mit objects geht unabhängig von Edge.

        Danke dennoch. :)

  10. Hanna
    schrieb am 21.02.2013 um 16:10 Uhr:

    Vielen Dank für den Tipp. Funktioniert bestens.

    Antworten
  11. Responsive Webdesign: Grundlagen, Technik, Workflow, Inhalte – Meine Slides vom Vortrag in Bremen | kulturbanause blog
    schrieb am 29.11.2012 um 10:42 Uhr:

    […] Videos im Responsive Design […]

    Antworten
  12. Google Maps im Responsive Webdesign | kulturbanause blog
    schrieb am 09.10.2012 um 09:31 Uhr:

    […] verschiedene Inhalte sorgen regelmäßig für Unmut. Nachdem ich bereits Lösungen für Tabellen, Bilder und Videos im Responsive Webdesign vorgestellt habe möchte ich nun das Snippet für den Einsatz von eingebetteten Google-Karten […]

    Antworten
  13. Synapsenkitzler
    schrieb am 08.08.2012 um 14:14 Uhr:

    Danke für die Infos. Sehr hilfreich!

    Antworten
  14. Responsive Webdesign mit CSS3 Media Queries | Wirsing Maracuja
    schrieb am 15.03.2012 um 12:35 Uhr:

    […] Flexible Videos im Responsive Webdesign Der Kulturbanause stellt eine JavaScript- und eine CSS-Lösung vor, mit denen man auch Videos dynamisch an die Fenstergröße anpassen kann. […]

    Antworten
  15. Mate
    schrieb am 19.12.2011 um 12:10 Uhr:

    Erstmal Tausend Dank. Habe mal ne Frage: Wenn ich nun ein Bild anstelle des Videos haben möchte – geht das? Würde gerne auf eine Folgeseite ein Bild als Hintergrund haben welches auch mit dem Browserfenster mit auf und zu geht! Habe sehr viel versucht und kenne mich ein wenig aus aber anscheinend reicht es nicht! Das neben der Spur …der mate

    Antworten
    • Jonas Hellwig
      schrieb am 19.12.2011 um 13:37 Uhr:

      @Mate: Für Bilder reicht normalerweise schon etwas wie img {width:100%; height:auto;}

      Antworten
  16. Felix
    schrieb am 18.10.2011 um 10:53 Uhr:

    toller Artikel! Wisst ihr vielleicht wie das CSS für einen responsive iframe (für zum Beispiel eine Google Maps Karte) oder auch eine swf-Datei aussieht?
    Die breite ist kein Problem, das kann man mit max-width: 100%; machen, aber die Höhe??
    Mit height: auto; wie bei Bildern funktioniert das nämlich nicht.

    Antworten
  17. Torsten Wagner
    schrieb am 08.10.2011 um 11:39 Uhr:

    Hi,

    den Post habe ich mit Begeisterung gelesen, da ich momentan Videos in eine eigene WordPress-Seiet implementieren will.

    Es handelt sich hier jedoch nicht um Verknüpfungen à la You Tube sondern um mp4-/webm-Files auf dem eigenen Server. Hier gibt es ja Lösungen wie den Video-JS-Player und ähnliche mit HTML5-Unterstützung und Flash-Fallback, die allerdings nicht auf den oben beschriebenen Hack hören wollen.

    Nach tagelangem Trial and Error hab ich nun eine Lösung durch eine kleine Abwandlung der obrigen Lösung gefunden und würde Sie gern hier präsentieren:

    Einbetten des Videos in die Seite:

    [video width="720" height="400" webm="video.webm" mp4="video.mp4" poster="http://wordpress.jagdkino-harz.de/assets/videos/video.jpg"]

    CSS:

    video {
    width: 100% !important;
    height: auto !important;
    }

    .responsive-video {
    padding-bottom: 25px;
    overflow: hidden;
    }

    .responsive-video .video-js-box {
    position: relative;
    width: 300px !important;
    min-width: 100% !important;
    }

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

    Das“ width: 300px“ bei „.responsive-video .video-js-box“ definiert die Größe, auf die das Video minimal verkleinert werden kann. Der Wert muss aber definitiv kleiner sein als die festgelegte Videogröße, bzw. Containergröße, da sonst kein Resizing statt finden.

    Ich hoffe ich konnte den Task noch ein wenig abrunden und helfen.

    Viele Grüße
    Torsten

    Antworten
    • Jonas Hellwig
      schrieb am 10.10.2011 um 07:19 Uhr:

      @Torsten: Vielen vielen Dank für diese ausführliche Ergänzung!

      Antworten
  18. Webstandard-Blog
    schrieb am 28.09.2011 um 10:49 Uhr:

    Klasse Anleitung Jonas, Danke!

    Antworten
  19. Lars Ebert
    schrieb am 28.09.2011 um 09:11 Uhr:

    Juhuu, endliche eine sinnvolle Lösung für mein zweitlästigstes Problem mit eingebetteten Videos. Vielen Dank für die kurze Einführung.

    Antworten
    • Jonas Hellwig
      schrieb am 28.09.2011 um 14:45 Uhr:

      @Lars Ebert: Was ist denn das lästigste Problem?

      Antworten
  20. Daniel
    schrieb am 28.09.2011 um 08:44 Uhr:

    Schöner Artikel. Du produzierst hier in letzter Zeit wirklich mit die interessantesten Inhalte zum Thema. Danke :)

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →