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