Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!
Achtung! Dieser Artikel wurde nach dem Relaunch von wpsnippets.de noch nicht überarbeitet und kann fehlerhaft in der Formatierungen sein.

YouTube Videos in WordPress einbinden

YouTube Video einbinden leichtgemacht. In diesem Post will ich kurz erklären, wie man ein YouTube Video in WordPress einbindet. Dabei ist die Vorgehensweise bei Beiträgen/Artikel und Seiten oder anderen Posttypes die gleiche.

* UPDATE * Wer seine Videos lieber selbst hosten möchte, anstatt einen Drittanbieter wie YouTube oder Vimeo zu benutzern, für den gibt es seit WordPress 3.6 einen integrierten Video-/Audioplayer.Wir haben hierzu den Artikel „Video in WordPress einbinden“ geschrieben.

Zunächst einmal müssen wir auf YouTube gehen und unser Video raussuchen. Ich nehm einfach mal einen kurzen Ausschnitt aus meiner Lieblings-Serie „The Big Bang Theory„.

Wir gehen auf das YouTube Video unserer Wahl und klicken unter dem Video auf den Reiter „Teilen“ und als nächstes, direkt in der Navigation darunter, auf „Einbetten„.

YouTube Video einbinden

Nun haben wir hier eine Hand voll Einstellungsmöglichkeiten, welche ich kurz anschneiden werden.

YouTube Video einbinden - Einstellungen

Zunächst einmal befindet sich unter dem Reiter Einbinden nun eine Textarea, in der der HTML Code für das Video zu finden ist, welchen wir rein reintheoretisch direkt kopieren und einfügen können.

<iframe width="640" height="360" src="http://www.youtube.com/embed/YbdeZ14q6ek?rel=0" frameborder="0" allowfullscreen></iframe>

Wem das nicht reicht, für den gibt es weitere Möglichkeiten diesen HTML Code zu verändern. Zum Beispiel für die „Videogröße„. Diese ist standardgemäß auf eine bestimmte Größe festgelegt, die sich auf die Videogröße bezieht. In unserem Beispiel haben wir eine vorgegebene Größe von 640*360 Pixel. Klickt man nun in der Dropdownbox auf den kleinen Pfeil an der rechten Seite sehen wir noch mehrere Größenangaben, aber auch den Punkt „Benutzerdefinierte Größe“. Hier muss nun die gewünschte Höhe oder Breite angegeben werden. Der zweite Wert wird automatisch errechnet. Soll das Video beispielsweise in die Sidebar eines Blogs eingebunden werden, welche eine Breite von 300px hat, so muss in das 1. Feld „300“ eingetragen werden. Bereits während der Eingabe verändert sich der oben stehende HTML Code und die Höhe wird automatisch gesetzt. In unserem Beispiel auf 169px.

Die zweite Einstellmöglichkeit „Nach Ende des Videos vorgeschlagene Videos anzeigen“ ist relativ selbsterklärend und gibt an, ob nach Ende des Videos „ähnliche Videos“ angezeigt werden sollten oder nicht. Je nach Video ist das Unterschiedlich. Hat man zum beispiel einen Imagefilm für sein Unternehmen erstellt, ist es vllt. Ratsam diese Funktion zu aktivieren, sodass es etwas seriöser rüber kommt. Diese Funktion kann bei bestehenden Videos innerhalb eines Blogs aber auch durch das Entfernen des GET-Parameters ?rel=0 am Ende der URL erledigt werden.

Als nächstes gibt es den Punkt „HTTPS verwenden„. Dieser Punkt ist dann wichtig, wenn eure komplette Webseite über HTTPS läuft, da es bei externen Inhalten, die normal über HTTP geliefert werden, zu Sicherheitswarnungen für den besucher kommt. Bei bestehenden Videos einfach das „http://youtube…“ durch „https://youtube…“ ersetzen.

Die vorletzte Option „Erweiterten Datenschutzmodus aktivieren„. Google ist ja als „Datenkrake“ bekannt und bei vielen somit auch direkt unten durch. Google sammelt aber nicht nur Daten über Google.de, sondern auch über die Tochterseite YouTube.com. Wenn du also deine Nutzer von dieser Sammelei schützen möchtest, sollte dieser haken aktiviert sein. Optional kann auch innerhalb des HTML Codes die Adresse „youtube.com“ mit „youtube-nocookie.com“ ersetzt werden.

Die letzte Option „Alten Einbettungscode verwenden“ ermöglicht es, wie der Name schon sagt, den alten Embed-Code von YouTube anzuzeigen. Wieso das Ganze? Nun ja, die alte Version unterstützt nur die alten Flashvideos, wohin bei der neuen Version sowohl Flash als auch HTML5 Videos wiedergegeben werden können. Sollte es nun durch einen Hoster oder eine Seite untersagt sein das „iframe“-Tag zu verwenden oder es mit dem neuen Code allgemeine Probleme geben, so sollte zunächst einmal der alte Code genutzt werden. Dieser sieht für unser Beispielvideo wie folgt aus:

<object width="300" height="169"><param name="movie" value="http://www.youtube.com/v/YbdeZ14q6ek?hl=de_DE&amp;version=3&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YbdeZ14q6ek?hl=de_DE&amp;version=3&amp;rel=0" type="application/x-shockwave-flash" width="300" height="169" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Ich hoffe ich konnte dem ein oder anderen Helfen und bevor ich mich verabschiede, hier noch das Beispiel in einer Liveansicht. *Knock Knock Knock*

Über André

Als Web- und Grafikdesigner arbeite ich täglich mit WordPress. Auf DRWP.de veröffentliche ich in unregelmäßigen Abständen immer wieder kleinere Snippets und Artikel, die mir bei meiner täglichen Arbeit helfen und auch für den ein oder anderen Suchenden von nicht unerheblichem Interesse sein könnten.

WordPress Affiliate ThemeAnzeige

6 Kommentare

Avatar von Marcel

Marcel 21. Januar 2013 um 21:04

Cooler Artikel, aber was noch sehr interessant zu belichten wäre, wie man denn ein Video optimal einbindet um nicht die Ladezeit zu sprengen. Kleines Beispiel:

http://www.insidegames.ch/guide/feed-me-oil-3-star-walkthrough-komplettloesung/

Antworten
Avatar von André Köbel

André Köbel 9. Februar 2013 um 16:17

In dem Falle wäre es am sinnvollsten, die einzelnen Videos mit einem jQuery Tab (oder besser Toggle) zu verstecken, sodass diese erst bei Klick aktiviert werden. Wenn ich die Tage Zeit habe, werde ich hierzu mal eine Anleitung schrieben.

*edit*
Optional wäre auch ein Link zum Video auf eine Lightbox nicht verkehrt. :)

Antworten
Avatar von Viktor

Viktor 14. Februar 2013 um 9:28

Hallo André Köbel,
Wenn du jetzt iframe einbindest ergibt es in HTML5 folgende Fehler:
line 163 column 121 – Fehler: Attribute allowfullscreen not allowed on element iframe at this point.
so wierds korrekt.
(you-big-blog.com/2012/09/29/html5-valide-einbettungscode-fuer-youtube-videos/)

einfach ?rel=0, frameborder=”0″, allowfullscreen entfernen
HTML5 validation tool- html5.validator.nu

Mfg
Viktor

Antworten
Avatar von Thomas

Thomas 13. November 2013 um 12:54

Hallo Andre,

mit der aktuellen WordPress-Version können Youtube Videos über Shortcode eingebunden werden:

http://en.support.wordpress.com/videos/youtube/

Bietet gegenüber der iframe Variante eine elegantere Lösung ohne Probleme.

Grüße
Thomas

Antworten
Avatar von André Köbel

André Köbel 13. November 2013 um 15:29

Hallo Thomas.

der Shortcode macht letztendlich nichts anderes. Wenn du dir den Quelltext von deren eingebundenem Video mal anschaust:

[html]<span style="text-align:center; display: block;" class="embed-youtube">
<iframe width="480" height="360" frameborder="0" src="http://www.youtube.com/embed/JaNH56Vpg-A?version=3&amp;rel=1&amp;fs=1&amp;showsearch=0&amp;showinfo=1&amp;iv_load_policy=1&amp;wmode=transparent&quot; type="text/html" class="youtube-player"></iframe>
</span>[/html]

Zeitgleich darf wordpress.com nicht mit WordPress(.org) verwechselt werden. :)

Gruß
André

Antworten
Avatar von Ralf

Ralf 3. Dezember 2016 um 19:26

Hallo, ich sitze seit Stunden vor dem Rechner, finde milliarden Seiten mit inhaltlich dieser Anleitung, aber meine Sch… WordPress Seite will und will die Videos nicht anzeigen.
Hinzukommt, dass ich nur Ausschnitte von Videos anzeigen will, auch dafür gibt es milliarden von Anleitunge aber auch Absolut gar nichts hilft mir. Weil die Sache mit dem alten Code überhaupt nicht hinhaut und inzwischen youtube den auch nicht mehr anbietet wie in diesem Artikel beschrieben. In solchen Moment könnte ich verzweifeln. Es kann doch nicht sein, dass es so einen Overkill an Anleitungen gibt und nichts aber auch gar nichts funktioniert bei mir.

Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*