YouTube sauber in WordPress einbinden

Update (02.07.2011): Änderungen am Code für die functions.php und in der Beschreibung.

Update (31.03.2016): Datenschutzkonforme(re)s youtube-nocookie.com eingefügt.

Da sich am Code für die Einbettung von YouTube-Videos in letzter Zeit so einiges getan hat und auch Anpassungen nötig wurden, habe ich mich entschlossen, einen ganz neuen Artikel dazu zu schreiben – einfach, um auf dem aktuellen technischen Stand zu sein.

Hinweis: Diese Anleitung gibt es auch für Vimeo-Videos.

Ich habe oft erlebt, dass im Feedreader etwas wie „Schaut Euch mal das Video an:“ stand. Doch danach kam nichts, weil einige Feedreader keine iFrames zeigen. Allerdings wird auch kein Ersatzinhalt gezeigt, weil im Einbettungs-Code von YouTube sowas nicht vorgesehen ist.

Wie bekommt man es nun hin, dass YouTube-Videos im Blog korrekt angezeigt werden und bei inkompatiblen Feedreadern ein Ersatzinhalt – oder wenigstens ein Direktlink zum Video – eingeblendet wird? Das steht hier…

Als kleines Beispiel nehmen wir an, Ihr möchtet das YouTube-Video meiner Landing-Compilation einbinden. Dazu ruft Ihr erstmal den Film direkt bei YouTube auf und kopiert dann die 11-stellige Video-ID (zur Veranschaulichung fett markiert) aus der Adressleiste:

https://www.youtube.com/watch?v=MexV_j-DtfU&feature=related

Nun legt Ihr einen neuen Blogartikel zum Testen an und fügt dort den folgenden Shortcode ein, mit dem dann alles ins Rollen kommt.

[youtube]MexV_j-DtfU[/youtube]

Die Video-ID habt Ihr sicherlich wiedererkannt?

Im Prinzip wärt Ihr jetzt schon fertig, aber das ist nur die halbe Wahrheit. Wenn Ihr Euch die Vorschau des Artikels anschaut, wird kein Video zu sehen sein, sondern nur der eben eingegebene Shortcode. Ein kleines Stück zum Glück fehlt nämlich noch: Die Hackerei.

Ihr müsst die functions.php, die Eurem Theme beiliegt, bearbeiten. Dort wird alles eingetragen, damit dann anstelle des Shortcodes der vollständige (X)HTML-Code in Eurem WordPress-Blog verwendet wird. Falls Ihr keine functions.php findet, müsst Ihr selbst eine anlegen.

Hinweis: Wer keine Ahnung hat, sollte lieber jemand ranlassen, der sich auskennt oder besser gleich darauf verzichten. Ich übernehme keine Haftung für Schäden. Außerdem bin ich ein mieser Programmierer: Was bei mir funktioniert, muss nicht überall laufen.

Verbesserungsvorschläge nehme ich daher dankend an.

Bearbeitung dieser wichtigen Datei auf eigene Gefahr! Damit Ihr so wenig Schaden wie möglich anrichtet, geht bis ans Ende der functions.php, sucht das abschließende ?> und fügt davor den folgenden Code erstmal unverändert ein:

function youtube($atts, $content) {
return '<iframe src="https://www.youtube-nocookie.com/embed/'.$content.'?autohide=1&amp;showinfo=0" height="344" width="612" frameborder="0" allowfullscreen>
<a href="https://www.youtube.com/watch?v='.$content.'" title="Video bei YouTube ansehen"><img src="http://img.youtube.com/vi/'.$content.'/sddefault.jpg" alt="Video bei YouTube ansehen" /></a>
</iframe>
<small><a title="Video bei YouTube ansehen" href="https://www.youtube.com/watch?v='.$content.'">Video bei YouTube ansehen</a></small>';
}

add_shortcode("youtube", "youtube");
add_filter('the_excerpt', 'do_shortcode');

In Zeile 2 wird der iFrame erstellt, den YouTube für die Wiedergabe des Films benötigt. Die Werte für width und height müsst Ihr individuell an Euer Blog anpassen: Findet heraus, wie breit das Video (Standard 16:9) sein soll. Diesen Wert merkt Ihr euch. In meinem Fall sind es 612 Pixel.

Nun geht bei einem YouTube-Video Eurer Wahl auf „Einbetten“ und gebt bei „Benutzerdefiniert“ die eben gemerkte Breite ein. Achtet darauf, dass Ihr ein Video im Format 16:9 habt, sonst stimmt das Verhältnis nicht. Den angegebenen Wert für die Höhe übernehmt Ihr in den Code.

[Änderung 09.06.2011] Ich habe das Attribut autohide=1 hinzugefügt. Nun müsst Ihr nur noch die Breite durch 16 teilen und mit 9 multiplizieren, schon habt Ihr den Wert für die Höhe. Kommt eine Zahl mit Komma raus, probiert Auf- oder Abrunden, damit kein Streifen entsteht.

[Änderung 02.07.2011] Ich habe das Vorschaubild von 0.jpg in sddefault.jpg geändert, weil es dann größer angezeigt wird.

In Zeile 3 wird der Alternativ-Inhalt erzeugt, wenn der iFrame nicht gezeigt werden kann oder darf. Ich habe eine Möglichkeit gefunden, ein Video-Vorschaubild aus YouTube einzubinden. Der Link darauf führt dann auf die YouTube-Seite des Videos, wo man es sich ansehen kann.

In Zeile 5 wird zur Sicherheit noch ein Textlink zur YouTube-Seite eingebaut – für den Fall, dass auch der Alternativ-Inhalt des iFrames übersprungen wird. Die add_filter-Funktion (Zeile 9) ist eingebaut, damit der Shortcode auch im Artikel-Auszug umgewandelt wird.

Wenn Ihr alles richtig gemacht habt und die Vorschau des Test-Artikels neu ladet, sollte nun statt des Shortcodes das Video in voller Pracht zu sehen sein:


Video bei YouTube ansehen

In inkompatiblen Feedreadern ist dann entweder der Platzhalter oder wenigstens der Direktlink zu sehen. Tolle Funktion: Das Vorschaubild wird nun direkt von YouTube bezogen. Man muss nichts mehr selbst fummeln. Und jeder Feed-Leser merkt, wenn ihm möglicherweise ein Film entgeht:

Video bei YouTube ansehen
Video bei YouTube ansehen

10 Kommentare zu diesem Artikel

Name: Benjamin  |  Datum: 6. Februar 2011  |  Zeit: 22:22

Vielen Dank, NetzBlogR, für das Bereitstellen.
Ich habe das für meinen neuen Blog übernommen. Ich werde es aber noch anpassen, damit ich die Abmessungen des Iframes per Shortcode noch ändern kann, denn die Videos haben zwar eine feste Breite im Layout, die Höhe variert aber je nach Seitenverhältnis.

Schönen Gruß
Benjamin

Name: NetzBlogR  |  Datum: 6. Februar 2011  |  Zeit: 23:25

Ich habe der Einfachheit halber 16:9 vorausgesetzt, weil die meisten Videos ja in diesem Format vorliegen. Und wenn man sich ein Video in Fullscreen anschaut (so wie ich das gern tue), hat man so oder so Streifen an den Seiten.

Name: Doshead  |  Datum: 8. Februar 2011  |  Zeit: 21:02

Gute Anleitung, thx

Name: Mika  |  Datum: 10. Februar 2011  |  Zeit: 20:17

Gute Anleitung guter Artikel.

Gruß Mika

Name: Dirk  |  Datum: 24. Februar 2011  |  Zeit: 09:46

Vielen Dank für die tolle Anleitung.

Name: Axt im Wald  |  Datum: 28. Februar 2011  |  Zeit: 12:33

Schönes Tutorial, funktioniert so leider nicht bei mir.
Wenn ich Videos nach o.g. Anleitung einbinde, zeigt er sie mir wunderbar in der Vorschau.
Nachdem ich publiziert habe, bekomme ich nur noch das Vorschaubild.

Any ideas?

Mfg Axt

Name: NetzBlogR  |  Datum: 28. Februar 2011  |  Zeit: 12:49

Komisch. Die Vorschau greift eigentlich auf das selbe Template zu, wie der Artikel später auch. Schicke vielleicht mal den publizierten Artikel durch den Validator auf validator.w3.org (dort Artikel-URL eingeben).

Vielleicht ist schon was im Shortcode nicht in Ordnung.

Name: AXt im Wald  |  Datum: 28. Februar 2011  |  Zeit: 16:41

Danke für deine schnelle Antwort…
Ich bin mir ziemlich sicher das es an meinem Theme liegt den ich benutze, der scheint mir shice geschrieben zu sein.
Danke schön für den Tip mit dem Validfator, ich bin ja noch Noob im Bereich WP :-))

Name: Ulli  |  Datum: 1. März 2011  |  Zeit: 08:18

Hallo,

habe seit meinem Update von Wordpress auf 3.1 Probleme gehabt Videos einzubinden. Werde es nach deiner Anleitung ausprobieren :-)……Gut beschrieben „DANKE“
Hoffe es klappt.

Gruß Ulli

Name: Sarah  |  Datum: 22. Juli 2011  |  Zeit: 14:29

Danke für die Anleitung – das war wirklich hilfreich!

Hinterlasse einen Kommentar





Alle mit * gekennzeichneten Felder müssen ausgefüllt werden. Die eMail-Adresse wird nicht offen dargestellt.

Ich erlaube mir, reine Werbeeinträge oder persönliche Beleidigungen zu löschen. Anonyme Kommentare werden generell nicht mehr freigeschaltet: Ich schreibe hier als reale Person und darf erwarten, dass jeder zu der Meinung steht, die er äußert.