So machst du Videos von Youtube und Vimeo responsive

Wer kennt es nicht, das ewige Leid mit der korrekten Darstellung (Seitenverhältnis) von eingebundenen Videos. Gerade wenn Websites responsive optimiert sind möchte man ja gerätübergreifend eine saubere Darstellung erzielen. Mit dem folgenden Trick werden Videos immer mit 100% Breite und dem korrekten Seitenverhältnis von Breite und Höhe dargestellt, vorbei ist die Zeit der schwarzen Balken.

Seitenverhältnis 16:9

So machst du Videos von Youtube und Vimeo responsiveOrientiert habe ich mich bei der Einbindung an Videos von YouTube und Vimeo im 16:9 Format, solltest du Videos anderer Anbieter einbinden wollen, musst du eventuell noch Anpassung am Seitenverhältnis vornehmen.

Um deine YouTube und Vimeo Videos responsive zu bekommen sind zwei Anpassungen nötig:

  1. Zuerst werden alle Video iframes mit der jQuery Funktion .wrap() dynamisch mit einem Container umschlossen.
  2. Als nächstes musst du diese Zwei Styleangaben in deinem Stylesheet ergänzen

Responsive Videos in WordPress

In WordPress kann man auf die Einbindung des Containers mit jQuery sogar verzichten. Füge diesen Codesnippet in deine functions.php und der Container wird serverseitig jedem Video dynamisch hinzugefügt.

Demo


Ihr Browser ist stark veraltet!

Bitte aktualisieren Sie Ihren Browser auf Browse Happy um sicher und unbeschwert surfen zu können.
Eine Initiative von WordPress