Seit einiger Zeit kann man in WordPress Videos per Link zur Videoplattform ganz einfach einbauen (embedded videos). Gerade die Klassiker wie Youtube oder Vimeo werden somit sehr leicht eingebunden. Leider sind die Videos dann nicht responsive und passen sich nicht der Größe des Endgeräts an. So kann es also sein, dass man z.B. ein Youtube-Video auf Desktop-Computern und Tablets mit 500px Breite anzeigen möchte, aber auf Smartphones der max. Breite entsprechend. Ansonsten wird das Video auf kleineren Monitoren rechts abgeschnitten. So wird’s gemacht.
Container Div um eingebettete Videos in WordPress setzen
Um eingebettete Videos von Youtube, Vimeo, etc. responsive zu machen, muss zuerst um die Videos ein Container <div> gesetzt werden (das passiert nicht automatisch, wenn man in WP ein Video embedded). Und anschließend über dieses Div dann per CSS das Video verkleinert.
Hier ein Beispiel eines responsive Videos:
https://www.youtube.com/watch?v=3tfbpQCQdQM
Der folgende Code kommt in die functions.php des Themes, welches verwendet wird. Es packt das eingebettete Video in einen Container. Wer ein Premium-Theme verwendet, sollte sich ein Child-Theme anlegen und dort die functions.php erstellen. Die Variante funktioniert übrigens auch für Videos, die per Jetpack eingebaut wurden.
/* Container zu eingebetteten Videos hinzufügen
/* ------------------------------------ */
function alx_embed_html( $html ) {
return '<div class="video-block">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'alx_embed_html' ); // für Jetpack
Per CSS eingebettete Videos in WordPress responsive machen
Als nächstes wird dann über das Container Div das Video responsive gemacht. Die folgenden Zeilen kommen in die style.css des Themes.
.video-block{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-block iframe, .video-block object, .video-block embed, .video-block video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Das war es eigentlich auch schon. Somit steht responsive Youtube und Vimeo Videos in WordPress nichts mehr im Wege.
Das liegt an dem Skript Fitvids (http://fitvidsjs.com/) welches beim verwendeten Theme Zuki von Elmastudio integriert ist.