info@netz-gaenger.de       📞 +49 151 / 28859057

WordPress eingebettete Videos responsive machen

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:

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.


Und wie ist das im Jahr 2025?

Bis 2025 haben sich die Möglichkeiten für responsive Videos in WordPress zwar verbessert, aber es gibt immer noch keine universelle Standardlösung für alle Themes und Situationen (wenn überhaupt dann über Pagebuilder, bestimmte Themes oder auch den Gutenberg Block-Editor (siehe unten)).

Viele moderne WordPress-Themes bieten inzwischen integrierte Unterstützung für responsive Videos. Allerdings ist das nicht bei allen Themes der Fall, und die Implementierung kann variieren.

Für Nutzer, deren Themes keine automatische Responsivität für Videos bieten, gibt es mehrere Lösungsansätze:

Plugins

Manuelle Methoden

  • Einbetten des Videos in einen Container-Div und Anwenden von spezifischem CSS

Theme-Funktionen

Einige Themes bieten integrierte Funktionen oder Shortcodes für responsive Videos. Schaue in deinem Theme oder Pagebuilder nach Video Modulen, die das Einbetten erleichtern. Achtung: Diese Implementierungen werden manchmal nicht vom Cookie Banner erkannt, der bei externer Einbindung von zB Youtube Videos erst eine Erlaubnis von Besuchern der Website einholen soll.

JavaScript-Lösungen

FitVids.js ist ein leichtgewichtiges jQuery-Plugin/Script, das Videos automatisch responsiv macht. Leute mit Coding-Kenntnissen können diese Variante implementieren, wenn die Plugin-Lösung nicht genutzt werden soll.

Obwohl die Unterstützung für responsive Videos in WordPress sich verbessert hat, ist es auch heute immer noch wichtig, die spezifischen Anforderungen des verwendeten Themes und der eingebetteten Videos zu berücksichtigen. Es gibt keine universelle „immer responsive“ Lösung für alle WordPress-Installationen, aber die verfügbaren Optionen machen es einfacher, responsive Videos zu implementieren.


Einbettung von Videos per Gutenberg Block responsive machen

Einbettungen von Videos per Gutenberg Block in WordPress sind in der Regel automatisch responsiv, ohne dass zusätzlicher Code erforderlich ist. Das gilt für die meisten gängigen Video-Plattformen wie YouTube und Vimeo. Der Embed-Block in Gutenberg macht Videos standardmäßig responsiv. Du musst lediglich die Video-URL in einen neuen Block einfügen. WordPress erkennt automatisch die URL und wandelt sie in einen eingebetteten, responsiven Video-Player um. Nach dem Einbetten kannst du zusätzliche Einstellungen vornehmen, wie z.B. die Breite anpassen, indem du auf das Video im Editor klickst.

Screenshot des Gutenberg Block Editor und die Möglichkeit Video Blöcke einzusetzen

Über den Gutenberg Block Editor kannst du Videos einbetten, die in der Regel schon responsive sind

Diese Methode funktioniert nicht nur für YouTube, sondern auch für andere Plattformen wie Vimeo, TED und andere. Auch in Sidebar-Widgets können Videos responsiv eingebettet werden, indem du den entsprechenden Video-Block hinzufügst. Solltest du trotzdem Probleme mit der Responsivität haben, obwohl du ein Block Theme verwendest, kann das an der individuellen Programmierung deines Themes liegen. Liegen hier Fehler vor oder ist es veraltet, ist es durchaus möglich, dass die mobile Optimierung der Videos nicht optimal ist. Du kannst dann immer noch die oben genannten Lösungsmöglichkeiten nutzen.

Hat dir mein Beitrag geholfen?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 1

Letzte Version vom 15. Februar 2025 von Netzgänger

Beliebte Artikel

Symbolbild für verlinkten Artikel: Wie gut ist HostPress

Wie gut ist HostPress, der spezialisierte WP Hoster?

Als WordPress-Entwickler habe ich viel mit Hostern zu tun. Hier liest du meine Erfahrungen zu HostPress und warum ich jetzt selber in einigen Projekten auf den Hosting-Anbieter setze.

Symbolbild für verlinkten Artikel: Die besten Webhoster

Die besten Webhoster im Vergleich

Als WordPress Entwickler kenne ich alle guten Hoster. Hier zeige ich dir die besten WP Hoster und welcher für dich Sinn macht.

Symbolbild für verlinkten Artikel: Muss WP gewartet werden?

Muss WordPress gewartet werden?

Müssen WordPress Sites gewartet werden? Braucht es die regelmäßigen Updates oder kann man sich den Aufwand sparen? Das erkläre ich hier.

Symbolbild für verlinkten Artikel: Die besten Security Plugins

Die besten WP Security Plugins

WordPress solltest du immer absichern. Dafür gibt es diverse Plugins, die dich bei den Securitymaßnahmen unterstützen. Meine Empfehlungen.

Symbolbild für verlinkten Artikel: Die besten Plugins für Auto-Übersetzung src=

Die besten Plugins für Auto-Übersetzung

Hier zeige ich dir 4 Plugins, die es ermöglichen WordPress automatisch zu übersetzen. Von wirklich gut bis wirklich schlecht ist alles dabei.

Symbolbild für verlinkten Artikel: Die besten Plugins für Mehrsprachigkeit

Die besten Plugins für Mehrsprachigkeit

Mit diesen 5 Plugins kannst du WordPress ganz einfach selber mehrsprachig einrichten. Multi-Language Fähigkeit in WP nachrüsten.

Bildnachweise: Freepik - Flaticon

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert