Videos richtig in WordPress Texte einbetten

 08. Jan 2014 |  WordPress Tipps

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 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.

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 … 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: … zum Beispiel:

Das eingebetete Video zentrieren

Mit Hilfe der Shortcodes haben Sie auch die Möglichkeit, das Video zu 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

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

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