WordPress: Youtube Videos Responsive einbetten

WordPress: Youtube Videos Responsive einbetten

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?

  • Pingback: Videos responsive in WordPress einbetten | Die Ideenlounge()

  • Mirjam

    Wow – super – danke für diese tolle Lösung. Und da ich kein allzu großer Freund vom Einsatz vieler Plugins bin, finde ich gerade diese Lösung ohne Plugin super.
    Hab die Seite gleich mal in meinem Blog verlinkt 🙂

    Ciao,
    Mirjam

    • Martin Funk

      Hey Mirjam.

      Danke für die netten Worte und das verlinken. 🙂
      Freut mich, dass dir die Lösung gefällt.
      Ahoi,
      Martin

  • Peter

    Herzlichen Dank! Das hab ich direkt umgesetzt und es funktioniert super! Ein Plugin weniger. 🙂

    • Martin Funk

      Freut mich! 🙂

  • Harry Milatz

    Hi Martin,

    ich hab deine Lösung schon länger im Einsatz, also schon bevor du es hier gepostet hast.
    Aber an einem bin ich bisher gescheitert. Und zwar bei selbst eingebundenen Videos, also nicht via YouTube o.ä., dass die WordPress-eigenen Steuerelemente ebenfalls sich dem responsive des Videos anpassen und nicht irgendwo in der Luft hängen.
    JS und PHP bekomme ich ganz gut hin, in CSS bin ich aber eher eine „Niete“;)
    Hast du dafür auch eine Lösung?

    Gruss Harry

    • Martin Funk

      Hey Harry.

      Hast du ein Live-Beispiel für dein Problem? Da tu ich mir leichter dir zu helfen.

      Lg, Martin

      • Harry Milatz

        Hi Martin,

        ich hatte von deiner schnellen Antwort hier gar keine Mail bekommen.
        Durch Zufall bin ich aber hier nochmal gelandet:)

        Natürlich habe ich da Beispiele:
        http://www.all4hardware4u.de/platinenherstellung/belichtung/belichtungsgeraet/
        http://www.all4hardware4u.de/elektronik-news/commodore-c64/
        http://www.all4hardware4u.de/elektronik-news/microbot/
        http://www.all4hardware4u.de/elektronik-news/das-3d-pad/
        http://www.all4hardware4u.de/elektronik-news/gehirn-auf-platine/

        Gruss Harry

        P.S. Ich schaue nun auch so wieder hier rein;)

  • Alexander Sauff

    Da muss man einfach mal DANKE! sagen! Schnelle, sparsame und effektive Lösung!