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…

Mein Name ist Hans

Willkommen in der Quetschkommo.de. Hier berichte ich über alles was mir so in den Sinn kommt. Etwas mehr über mich kannst du hier erfahren und wo ich sonst noch so im Netz vertreten bin erfährst du mit einem Klick auf diesen Link. Wenn es dir hier gefällt komm ruhig wieder vorbei, ich würde mich freuen. Oder abonniere doch einfach den RSS-Feed dieses Blogs, um immer auf dem Laufenden zu bleiben.

Dieser Beitrag wurde 5 mal kommentiert

  1. Markus

    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

  2. Hans

    Ist noch nicht zu mir durchgedrungen, danke für die Info…http://quetschkommo.de/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

    • Markus

      Shit Smartphone… Heißt dann sinnigerweise oEmbed in Comments, hab nur gerade den Link nicht parat.

  3. Hans

    Für die Kommentare brauche ich nix, hier sollen ja keine Videos eingebunden werden… http://quetschkommo.de/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif