kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

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>

Das nachfolgende Demo-Video ist mit der Script-Lösung ausgestattet. Wenn ihr testen möchtet wie sich das Video verhält, ändert die Größe eures Browser-Fensters.

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

Wer kein Script benutzen möchte kann Videos natürlich auch manuell um das notwendige Markup erweitern. Nick La hat vor einiger Zeit einen Artikel zu diesem Thema verfasst den ich hier gerne aufgreifen möchte.

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

22 Kommentare

  1. Daniel

    Verfasst am 28. September 2011 um 8:44 Uhr.

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

  2. Lars Ebert

    Verfasst am 28. September 2011 um 9: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.

    • Jonas Hellwig

      Verfasst am 28. September 2011 um 14:45 Uhr.

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

  3. Webstandard-Blog

    Verfasst am 28. September 2011 um 10:49 Uhr.

    Klasse Anleitung Jonas, Danke!

  4. Torsten Wagner

    Verfasst am 8. Oktober 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

    • Jonas Hellwig

      Verfasst am 10. Oktober 2011 um 7:19 Uhr.

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

  5. Felix

    Verfasst am 18. Oktober 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.

  6. Mate

    Verfasst am 19. Dezember 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

    • Jonas Hellwig

      Verfasst am 19. Dezember 2011 um 13:37 Uhr.

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

  7. Synapsenkitzler

    Verfasst am 8. August 2012 um 14:14 Uhr.

    Danke für die Infos. Sehr hilfreich!

  8. Hanna

    Verfasst am 21. Februar 2013 um 16:10 Uhr.

    Vielen Dank für den Tipp. Funktioniert bestens.

  9. Jonas

    Verfasst am 2. April 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

    • Jonas Hellwig

      Verfasst am 3. April 2013 um 8:43 Uhr.

      Hallo Jonas,

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

      • Jonas

        Verfasst am 3. April 2013 um 10:49 Uhr.

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

        Danke dennoch. :)

  10. grafix

    Verfasst am 22. Mai 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!

  11. grafix

    Verfasst am 22. Mai 2013 um 23:47 Uhr.

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

  12. seherpsalms

    Verfasst am 18. Juni 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

  13. Michael

    Verfasst am 20. Juni 2013 um 22:18 Uhr.

    Klasse Lösung!
    Dafür herzlichen Dank.

  14. Fighter

    Verfasst am 20. November 2013 um 8: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. ;-)

  15. Andy Wischer

    Verfasst am 8. Februar 2014 um 0: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 ***

  16. Dirk 100mark

    Verfasst am 9. März 2015 um 8: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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.