YouTube Videos responsive in WordPress einbinden

wordpress

YouTube-Videos responsive in ein WordPress-Blog einbinden, das ist auch so eine Sache die ich schon eine gefühlte Ewigkeit vor mir her schiebe. Dabei ist es eigentlich überhaupt kein Hexenwerk, so etwas ohne zusätzliches Plugin zu bewerkstelligen. Also habe ich mir eben mal ein Stündchen Zeit genommen, per Lieblingssuchmaschine beim Geiststreicher die entsprechenden Zutaten abgefischt, im Theme-CSS eingebettet, die bisher hier veröffentlichten 10 Videobeiträge entsprechend geändert und fertig ist die Laube.

Man nehme folgenden CSS-Code und trage ihn im entsprechenden Stylesheet des Themes (bei mir: resposive.css) ein:

csscode

Möchte man ein nun ein Video im Blog einbetten, ohne dass dieses auf dem Smartphone gleich das komplette Layout verzerrt fügt man folgendes ein:

Klick macht größer
Klick macht größer

Dabei ist darauf zu achten, dass man die Iframe-Variante des Embed-Codes auswählt. Die center-Befehle innerhalb der div-Container habe ich im übrigen von mir aus dazu gefügt, ich habs gerne mittig. Kann man also auch weglassen, dann steht das Video linksbündig im Beitrag. Und nun sollte auch das eingebettete nachfolgend Video maßstabgerecht auf dem Smartphone anzuschauen sein. Bei mir jedenfalls klappt es…

5 Kommentare zu „YouTube Videos responsive in WordPress einbinden“

  1. Warum so kompliziert? Das Zauberwort heißt schlicht und ergreifend oEmbed. Einfach den URL des Videos in eine eigene Zeile schreiben, und gut. Funktioniert mit YouTube und Vimeo, aber auch zum Einbinden von Tweets oder Instagram-Bildern und vieles mehr.

    Videos werden dann einfach auf 100% Breite des verfügbaren Bereiches skaliert. Egal, ob du den 70-Zöller im Wohnzimmer ansteuerst, oder das Smartphone-Display herhalten muss. Einzige Voraussetzung: in der funtions.php des Themes sollte die maximale Breite definiert sein:
    if ( ! isset( $content_width ) ){
    $content_width = 670;
    }
    Wobei die 670 natürlich an die bei dir verfügbare Breite anzupassen ist.

    Was WordPress in Sachen oEmbed unterstützt, findest Du hier:
    https://codex.wordpress.org/Embeds

Kommentarfunktion geschlossen.