Flexible Videos im Responsive Webdesign
Videos von externen Quellen wie YouTube oder Vimeo können im responsive Design Probleme bereiten. Mit einem Script können die Videos so angepasst werden, dass sie sich flexibel anpassen und keine Fehldarstellung erzeugen.
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.
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:
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…
naja… eigentlich steht bei wrap noch das entsprechende div-tag, aber es wird hier nicht angezeigt…
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
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 ***
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. ;-)
Klasse Lösung!
Dafür herzlichen Dank.
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
Allerbesten Dank nochmal,
für das Topic und die Zusatzinfo.
Klingst sehr gut, werde
es gleich ausprobieren!
Noch eine Frage:
wie kommt es zu diesen Werten?
padding-bottom: 56%;
padding-top: 30px;
Danke!
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
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
Hallo Jonas,
was Edge Animate angeht bin ich leider nicht im Thema, da kann ich dir nicht weiterhelfen. Sry.
Also eigentlich wollte ich nur fragen, ob das auch mit objects geht unabhängig von Edge.
Danke dennoch. :)
Vielen Dank für den Tipp. Funktioniert bestens.
[…] Videos im Responsive Design […]
[…] 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 […]
Danke für die Infos. Sehr hilfreich!
[…] 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. […]
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
@Mate: Für Bilder reicht normalerweise schon etwas wie
img {width:100%; height:auto;}
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.
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
@Torsten: Vielen vielen Dank für diese ausführliche Ergänzung!
Klasse Anleitung Jonas, Danke!
Juhuu, endliche eine sinnvolle Lösung für mein zweitlästigstes Problem mit eingebetteten Videos. Vielen Dank für die kurze Einführung.
@Lars Ebert: Was ist denn das lästigste Problem?
Schöner Artikel. Du produzierst hier in letzter Zeit wirklich mit die interessantesten Inhalte zum Thema. Danke :)