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
Orientiert 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:
- Zuerst werden alle Video iframes mit der jQuery Funktion
.wrap()dynamisch mit einem Container umschlossen.1234jQuery(document).ready(function () {/* RESPONSIVE VIDEOS */jQuery('iframe[src*="youtube"], iframe[src*="vimeo"]').wrap('<div class="video-wrap"></div>');}); - Als nächstes musst du diese Zwei Styleangaben in deinem Stylesheet ergänzen1234567891011121314151617181920/* RESPONSIVE VIDEOS */.video-wrap {position: relative;height: 0;padding-bottom: 56.25%;margin: 2em auto;// 16:9 FORMAT => 56.25%// 4:3 FORMAT => 75%}.video-wrap iframe,.video-wrap embed {position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100% !important;height: 100% !important;}
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.
1 2 3 4 5 6 7 8 9 10 11 12 | function responsive_video_wrap( $content ) { $pattern = '~<iframe.*</iframe>|<embed.*</embed>~'; preg_match_all($pattern, $content, $matches); foreach ($matches[0] as $match) { $wrappedframe = '<div class="video-wrap">' . $match . '</div>'; $content = str_replace($match, $wrappedframe, $content); } return $content; } add_filter('the_content', 'responsive_video_wrap'); |