Youtube Videos werden mittlerweile automatisch im WordPress Editor als solche erkannt und eingebettet. In diesem Beitrag zeige ich, wie man Youtube Videos Responsive in seine WordPress Seite einbettet.

Tipp: Funktioniert die automatische Einbettung mal doch nicht, dann den Link mit der Funktion “Als Text einfügen”.

Arbeiten mit einem Filter

Zuerst benötigen wir einen Filter, dem wir sagen “Hey, gib uns ein <div> mit der Klasse video-container um jedes Video”. Folgender Code kommt dazu in die functions.php:

(Siehe auch https://wordpress.org/support/topic/adding-a-wrapping-div-to-video-embeds)

Vergleich Vorher – Nachher

Bevor ich die Funktion von oben in meine functions.php eingefügt habe, sah der HTML-Source-Code so aus:

Responsive Video 01

Standard Einbettung eines Videos in WordPress.

Die Funktion sorgt nun dafür, dass das gewünschte <div> tag um das Video “gewrappt” wird:

Responsive Video 02

 CSS hinzufügen

Damit sich das Video nun wirklich Responsive verhält, braucht es nur mehr folgende CSS Angaben:

Und hier folgt dazu das Live Beispiel:

Resümee

Das responsive Einbetten von Youtube Videos  ist schnell gemacht. Ein Filter in der functions.php sowie ein paar CSS Angaben reichen dazu völlig aus.

Funktioniert das auf deiner Webseite auch? Machst du daraus vielleicht ein Plugin?