Coding

Eingebettete YouTube-Videos in WordPress nachträglich responsive machen

access 1867690 1920

Diese Maßnahme sollte sich heute in WordPress erübrigen.

Die Lösung kommt ohne Plugin und ohne Javascript aus.

Das HTML5-Tag “video” lässt sich mit CSS problemlos dimensionieren. Bettet man jedoch Videos von Youtube ein (Standardmethode Link auf die Videoseite), erhält man immer noch ein festes Format für das Video in einem fest dimensionierten iframe. Iframes sind css-technisch problematisch, da sie ihre Höhe nicht automatisch dem Inhalt anpassen. Mit Hilfe eines Wrappers kann man diesen Umstand umgehen und erhält bei 100% Höhe des iframes das perfekte 16:9 Format.

Möglich ist das durch das Verhalten der Elemente bei prozentuellen Paddingangaben. Diese beziehen sich auf dessen Breite. Der Paddingwert 56,25% kombiniert mit einer Höhe von 0 schafft einen Container im Format 16:9.

video { width: 100% !important; height: auto !important; } .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper > *, .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height:100% !important; }

Dieser Teil im CSS .videoWrapper > * trägt dem Umstand Rechnung, dass WordPress beim Zeilenumbruch zwischen Div und Video ein P-Tag einfügen wird. Ohne den Zeilenumbruch wird der Link nicht gerendert, und man bekommt kein Video.

Ältere Sites die bereits viele Videos eingebettet haben hinterher manuell mit Wrappern auzustatten kann je nach Anzahl von Posts und Videos zeitlich belastend sein. Als Interimslösung bietet sich an, nach YouTube-Videos im Content zu suchen und den Wrapper, wo er fehlt automatisiert zu setzen. So kann man sich mit der Umstellung Zeit lassen. Regex adaptiert von Patrick Talmadge (jenen Teil der benötigt wird um die ID zu extrahieren habe ich weggelassen).

Hinweis: Als Dauerlösung nicht geeignet. Ein normaler HTML-Link auf eine Videsoseite bei YouTube wäre davon ebenfalls betroffen, mit unerwünschten Effekten.

functions.php (Theme)

function ppt_responsive_video($content) { $regexstr = '~ (?:(?:<iframe [^>]*src=")?|(?: (?:<object .*>)?(?:<param .*</param>)* (?:<embed [^>]*src=")?)?)? (?:https?://(?:[w]+.)* (?: youtu.be/ | youtube.com | youtube-nocookie.com )) "? (?:[^>]*>)?(?: </iframe> |</embed></object>)? ~ix'; global $post; if ( stripos($post->post_content,'<div class="videoWrapper') === false ) { $pattern = $regexstr; $content = preg_replace($pattern,'<div class="videoWrapper">${0}</div>', $content); } return $content; } add_filter('the_content', 'ppt_responsive_video');

Ergebnis

YouTube

Beim Abspielen werden Ihre Daten durch den Anbieter Google in den USA verarbeitet, was mit entsprechenden Risiken, z. B. eines heimlichen Datenzugriffs durch US-Behörden verbunden ist. Mit Ihrer Einwilligung zu Statistik- und externe Medien-Cookies erklären Sie sich auch mit der Verarbeitung Ihrer Daten in den USA einverstanden. Mit dem Laden des Videos akzeptieren Sie außerdem die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

weiter schmökern

Schreibe einen Kommentar

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden.

Deine E-Mail-Adresse wird nicht veröffentlicht.