Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Responsive Webdesign – Grundlagen

Videos

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Auch Videos müssen sich beim RWD an die Umgebung anpassen. Sind Videos über iFrames eingebunden, hilft ein schönes JavaScript-Tool mit Namen FitVids.

Transkript

Neben Bildern gibt es auf Web-Seiten häufig auch Videos. Und besonders häufig sind Videos, die über ein iframe von Drittanbietern eingebunden werden. Damit diese sich immer an die Größe des Bildschirms anpassen, kann man da auf einen Trick zurückgreifen oder gleich ein jQuery Plugin dafür nehmen. Ich habe hier ein kleines Beispiel vorbereitet, wo ich jetzt ein Video von YouTube einbinden lasse. Es können wir uns mal kurz anschauen. Dann sehen Sie hier ist dieses Video mit den richtigen Verhältnissen angegeben. Und ich könnte das dann auch starten. Gehen wir mal wieder zurück zum Code. Wenn ich möchte, dass sich das an die Größe des Bildschirms oder des Viewports anpasst... Das funktioniert ja so erstmal natürlich nicht, weil es eine feste Größe hat. Hier kommen die Rollbalken hier unten in dem Moment, wo das Browser-Fenster kleiner wird. Ein erster Ansatz könnte natürlich sein, dass ich einfach sage: ich nehme den Trick, den ich auch für Bilder verwende. Nämlich max-width: 100% und height: auto Schauen wir uns das jetzt einmal an. Und dann werden Sie sehen: Oh, das klappt ja überhaupt nicht, weil das verzerrt das. Das kriegt dann nicht die richtigen Dimensionen. Dass das problematisch ist, liegt am iframe. Wenn ich das Video direkt über das HTML für ein Video-Element einbinden würde, dann würde das funktionieren mit dem max-width-Trick. Es gibt aber natürlich glücklicherweise auch für dieses Problem eine Lösung. Die hat Koblentz rausgefunden in einem Artikel bei A List Apart. Schauen wir uns einmal an wie das Ganze hier funktioniert. Das ist ein Artikel bei A List Apart, wo er sich genau mit diesem Problem auseinandersetzt. Und der Trick, den er herausfindet, ist dass man dann einen richtigen Wert für padding-bottom in Prozent angeben muss, der widerspiegelt das Verhältnis des Videos. Das Ganze ist natürlich ein bisschen kompliziert, wenn man das händisch machen muss. Schöner ist, wenn man sich hier helfen lässt. Und das kann man über ein jQuery Plugin. Das hier ist das jQuery Plugin und das erlaubt eben flüssige Videos. Wenn wir mal hier zur Download-Seite gehen... Die habe ich hier schon aufgerufen. ...dann finden Sie hier das Plugin, was Sie herunterladen müssen. Und Sie sehen auch gleich, wie verwendet man das Plugin. Das ist ein jQuery Plugin, das heißt es basiert auf jQuery. Und deswegen müssen wir zuerst jQuery einbinden. jQuery ist ja eine, sagen wir, die beliebteste JavaScript-Bibliothek. Danach, weil das Plugin auf jQuery basiert, gebe ich das Plugin an. Das muss sich natürlich dann anpassen auf den Pfad. Und dann kann ich das Plugin aufrufen. Schauen wir uns das mal hier in unserem Beispiel an. Also, das kann ich hier wieder auskommentieren, weil das funktioniert so nicht. Und da unten habe ich das andere schon mal vorbereitet. Hier habe ich mein Script-Element ganz am Ende des Dokumentes und verweise hier auf jQuery. Ich könnte eine lokale Kopie von jQuery nehmen, aber es ist natürlich sehr komfortabel, wenn man eine Version aus dem Internet nimmt. Zudem hat es dadurch den Vorteil, dass wenn jemand auf die Seite geht, die Wahrscheinlichkeit recht groß ist, dass er auf einer anderen Seite war, die auch diesen Verweis auf jQuery verwendet. Und damit ist jQuery bereits im Cash gespeichert und das muss nicht neu heruntergeladen werden. Also, es ist auch wichtig für die Performance. Das ist also der erste Teil. Und im zweiten Teil muss ich dann ein Script-Element erstellen und auf das fitvids direkt verweisen. Im Beispiel befindet sich das in dem selben Ordner. Ein drittes Script-Element brauche ich dann, um das Plugin aufzurufen. Das geht ja sehr schön in jQuery, weil man zum Auswählen der Elemente dieselben Selektoren verwenden kann wie in CSS. Und zwar muss ich den umfassenden Container des Videos auswählen und dann den Befehl des Plugins aufrufen, nämlich fitvids heißt das. Im Beispiel habe ich hier ein div-Element um das Video rumgemacht mit einer Klasse videocontainer. Das kann ich also ansprechen über .videocontainer, hier in runden Klammern, dann kommt ein Punkt und der Befehl, um das Video zu starten. Das Dollarzeichen hier übrigens was Sie sehen, ist ein Alias für jQuery selbst. Und in dem Moment brauche ich die jQuery- Funktion, um eben das Element auszuwählen. Wenn Sie das hier mit dem Code in dem Beispiel vergleichen, dann sehen Sie, dass hier auch (document).ready eingefügt ist. Das müssten Sie einfügen, wenn Sie den JavaScript-Code nicht ganz am Ende des Dokumentes haben, sondern am Anfang. Weil das sorgt dann dafür, dass das Ganze erst ausgeführt wird, wenn das ganze Dokument geladen ist. Das ist immer wichtig, damit die Elemente auch gefunden werden. Aber einfacher als dieses (document).ready auch zu ergänzen it es einfach den JavaScript- Code ganz nach unten hinzuschreiben. Das ist für die Performance auch die empfohlene Variante. Schauen wir uns jetzt einmal an wie das Ganze jetzt funktioniert. Hier habe ich wieder mein Video und Sie sehen: das Video passt sich an und die Verhältnisse passen. Das ist natürlich ganz wunderschön. Als Fazit lässt sich festhalten, dass Sie an sich dieses max-width auch für Video-Elemente verwenden können. Aber nicht für iframes. Und wenn Sie ein Video über ein iframe einbinden, dann geht das sehr einfach, dass man das flüssig macht über das jQuery Plugin fitvids.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!