Aus dem Kurs: Responsive Webdesign: Bilder und Videos

Erhalten Sie Zugriff auf diesen Kurs – mit einer kostenlosen Probeversion

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 25.300 Kurse von Branchenfachleuten.

Videos responsiv machen

Videos responsiv machen

Aus dem Kurs: Responsive Webdesign: Bilder und Videos

Gratismonat starten Für Ihr Team erwerben

Videos responsiv machen

“

Wenn Sie ein Video auf einer responsiven Seite verwenden, so soll sich das natürlich an die Umgebung anpassen und bei Bedarf auch kleiner werden. Wie macht man das? Erst einmal braucht man für Experimente Videos und diese finden Sie beispielsweise auf dieser Webseite. Ich habe ein Video heruntergeladen und eingebunden und bei der Technik, die ich jetzt zeige, ist es wichtig, dass das Videoelement direkt im HTML-Code steht. Es ist nicht ein iframe oder so, über das das Video eingebunden wird. Da ist unser Video und wenn ich den Viewport jetzt verkleinere, dann sehen wir, das Video passt sich nicht an. Ich müsste scrollen. Für direkt im HTML-Code stehende Videos kann ich den Trick verwenden, den man auch gerne bei Bildern macht, also, ich wähle das Videoelement aus und sage dann max-width: 100%; height: auto; Wenn ich die Seite aktualisiere, dann passt sich mein Video an und wird größer und kleiner. Und es lässt sich natürlich auch abspielen. Wenn das Video direkt über das Videoelement…

Inhalt