Beitrag

 
Videos richtig in WordPress Texte einbetten

Videos richtig in WordPress Texte einbetten

Durch Videos werden Ihre Beiträge noch lebendiger. Sehr beliebt – weil bestens kompatibel – sind YouTube Videos. Öffentliche Videos dürfen Sie auch in Ihrem Blog einbinden. Absolut unique sind natürlich eigene Videos, die Sie über YouTube hochgeladen haben. So oder so: Für die perfekte Platzierung reicht es bei einigen Themes aus, die Video-URL zu kopieren und in den Text einzufügen, andere erfordern noch zusätzliche Bearbeitung.

Der einfache Weg ein YouTube Video einzubinden

WordPress macht es dank einer Funktion namens oEmbed ganz einfach ein Video (YouTube oder Vimeo) in Ihren Beitrag einzubinden. In der Regel brauchen Sie nur die Video-URL aus der Adressleiste Ihres Webbrowsers zu kopieren.

YouTube Video URL

YouTube URL kopieren

Diese URL fügen Sie anschliessend in einer eigenen Zeile in den Editor Ihres Beitrags ein. Dabei ist es ratsam, den Texteditor zu verwenden um zu vermeiden, dass WordPress Steuerzeichen der URL hinzufügt und so nur ein Link eingefügt wird.

Einfügen einer YouTube URL

YouTube Video in eigene Zeile einfügen

Der Rest erledigt sich von selbst! Das Video wird in etwa so aussehen:

Internet-Adresse (URL) bei WordPress einstellen

Die Größe des eingebeteten Videos beeinflussen

Möchten Sie die Größe des Videos beeinflussen, können Sie das Video in die Shortcodes [embed width=“300″ height=“169″]…[/embed] einfassen. Width steht für die Breite und height für die Höhe des Videos. Geben Sie nur die Breite oder die Höhe an, dann ergibt sich der andere Wert automatisch: [embed width=“300″]…[/embed] zum Beispiel:

.

Das eingebetete Video zentrieren

Mit Hilfe der Shortcodes haben Sie auch die Möglichkeit, das Video zu zentrieren:

Videos zentrieren

Videos zentrieren

Der passende Code dazu sieht so aus:

<p style=“text-align: center;“>[embed width=“300″]http://www.youtube.com/watch?v=9WqscugNLRE[/embed]</p>

Eingebundene Videos im responsive Webdesign

Bei modernen WordPress Themes passt sich die Breite der Videos automatisch an die Breite des Textfensters an. Testen Sie durch Verkleinerung der Breite Ihres Browser-Fensters oder indem Sie Ihre Website über ein Smartphone aufrufen, ob das bei Ihnen der Fall ist.

Für diejenigen unter Ihnen, die noch ein etwas älteres Webdesign verwenden (oder eine suboptimal programmiertes Theme) verweisen wir auf einen grandiosen Tipp, den wir auf der Website von Elmastudio gefunden haben. Auf der Seite CSS-Tip: Eingebettete Videos für responsive Webdesign optimieren wird eine sehr schöne Methode beschrieben, mit der sich jedes eingebetete Video flexibel in der Größe anpasst.

Das Einbinden eines Videos funktioniert nicht

Wird kein Video sondern nur ein Link in Ihrem Beitrag angezeigt, kann das zwei Gründe haben:

  1. Sie haben für die eingefügte URL keine eigene frei Zeile verwendet oder WordPress hat die eingefügte URL automatisch in einen Link gewandelt. Verwenden Sie beim einfügen den der URL den Text-Editor statt den Visuell-Editor, sind Sie auf der sicheren Seite.
  2. Der Urheber erlaubt das einbetten seines Videos nicht. In diesem Fall können Sie nichts ändern. WordPress erstellt automatisch einen Link.

Wenn Sie das Video als iFrame einbetten müssen

Gibt es für Sie einen Grund, Videos auf dem klassischen Weg als iFrame einzubinden, dann sollten Sie weiterlesen. Auch bei dieser Methode haben Sie viele Anpassungsmöglichkeiten.

Um den nötigen iFrame-Code zu erhalten, klicken Sie unter dem gewählten YouTube Video die Funktion „Teilen“ an. In dem nun eingeblendeten Menü gehen Sie auf „einbetten“. Jetzt erscheint (gerahmt) der HTML-Einbettungscode. Darunter, in einem weiteren Rahmen, sehen sie die Größe des Videos. Zuerst klicken Sie rechts neben der Größenangabe auf den kleinen Pfeil und wählen in der sich öffnenden Auswahl die Größe aus, die Sie für Ihren Blogtext haben wollen. Beim Verändern dieser Werte sehen Sie übrigens auch, wie sich der Einbettungscode darüber entsprechend anpasst.

Einbettungscode von YouTube Videos finden

Einbettungscode von YouTube Videos finden

Den Einbettungscode kopieren und einfügen

Entspricht die Größe Ihren Vorstellungen, kopieren Sie den Einbettungscode und setzen ihn in Ihren Blogtext ein. Wählen Sie dazu die Textansicht aus und fügen den Code an die Stelle im Text ein, an der das Video eingebunden werden soll.

Einbettungscode für Ihr Video im Text einfügen

Einbettungscode für Ihr Video im Text einfügen

Jetzt können Sie analog der oben beschriebenen Methode Ihre Videos ausrichten, zentrieren oder für Responsive Webdesign optimieren.

Autor:

Elbnetz ist ein Team enthusiastischer WordPress-Fans. Wir sind davon überzeugt, dass niemand überkandidelte, komplizierte Websites braucht. Mit WordPress ist es möglich, grandiose Websites zu entwickeln.

  • Kolja

    Hallo liebe Elbnetz-Gemeinde ich danke euch für die guten Tipps. Ich hab mir schon einen Wolf Gesucht wie ich diese Videos in meinem Blog einbauen kann. Danke vielmals

    Antworten
  • Christian

    Herzlichen Dank! Tolle Anleitung, sehr hilfreich für uns Bürgerinitiativen.

    Antworten
  • meicel

    Danke jetzt weiß ich endlich wie es funktioniert

    Antworten
  • Georg

    Danke für die tole Anleitung. Hat mir sehr weiter geholfen !

    Antworten
  • Lars Pilawski

    Cooler Artikel, aber ich bekomme es nicht hin, das Video auomatisch abspielen zu lassen und die Größe zu verändern. Mit dem HTML Code lässt sich die Größe innerhalb von WordPress nicht verändern und bei dem dem Embeded kann ich das Autoplay nicht nutzen. Weiß einer eine Lösung?

    liebe Grüße und weiter so
    Lars Pilawski

    Antworten
    • Kim Salewski

      Hallo Lars,

      Wenn du ein iframe nutzt, wie in dem Beitrag beschrieben, kannst du die Größe des Videos ändern, in dem du direkt hinter dem

      Antworten

Ein Kommentar? Gern!

Ihnen gefällt unser Blog?

Dann wird Sie unser
Buch begeistern!

Mehr erfahren

Ihnen gefällt unser Blog?