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.
Inhaltsverzeichnis:
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:
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.
Frank Hempel
Großartig:
Hab die wenigen Zeilen Code in die functions.php und style.css eingebunden – läuft!
Gut, dass es Menschen mit mehr Ahnung als ich gibt …
🙂
Torsten Landsiedel
Das liegt an dem Skript Fitvids (http://fitvidsjs.com/) welches beim verwendeten Theme Zuki von Elmastudio integriert ist.
Heike Lorenz
Hm – also bei mir scheint das auch ohne die Code-Erweiterung zu funktionieren:
http://das-elternhandbuch.de/2017/03/09/zaehneputzen-mit-kindern-so-gehts/
Warum ist das so?
Viele Grüße
Heike
René Dasbeck Post author
Ich denke da gibt es bei dir die Implementation schon. Zumindest wird eine Klasse fluid-width-video-wrapper um das Video gelegt und per CSS responsive gemacht. Kommt vielleicht mit dem Theme mit.