YouTube im Feedreader (Teil 2) – UPDATE!

Update (09.09.2010): Kleine Verbesserung am Code vorgenommen.

Update (05.02.2011): Ich habe ein neues Tutorial mit dem neuen HTML5-Code geschrieben. Diese Anleitung hier ist daher hinfällig!

Strike! Es hat funktioniert! Nun kann man anhand eines Platzhalters im Feed erkennen, wo ein Video eingefügt wurde. Sorry für die Verwirrung: Ich hatte nicht vor, das Video lauffähig zu bekommen. Hier ist trotzdem das How-To, vielleicht braucht’s ja auch jemand:

Mit dieser Anleitung zeige ich Euch, wie man Videos ganz einfach in WordPress einbindet und der Platzhalter im Feed angezeigt wird. Erstmal nur am Beispiel von YouTube, weil ich da genau weiß, wie das mit den IDs und dem Flash-Aufruf funktioniert.

Bei Vimeo scheint es kaum anders zu sein, aber da muss ich mich erst noch reinfuchsen.

Als erstes sollte man wissen, dass der von YouTube ausgegebene Einbettungs-Code nicht valid ist. Deshalb sollte man den gleich wieder vergessen, wenn man in seinem Blog ein (X)HTML-Valid-Siegel tragen möchte.

YouTube wollte möglichst für alle Browser kompatibel sein und hat deshalb die bekannte object-embed-Verschachtelung verwendet. Wie man Flash doch valide einbindet, hat Drew McLellan 2002 (!) in seinem Artikel Flash Satay beschrieben. Bookmark-Befehl!

Ein YouTube-Video bindet man nach der validen Methode so ein:

<object type="application/x-shockwave-flash" data="https://www.youtube.com/v/ID?fs=1" width="500" height="306">
<param name="movie" value="https://www.youtube.com/v/ID?fs=1" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="opaque" />
<a href="https://www.youtube.com/watch?v=ID" target="_blank" title="YouTube-Video &ouml;ffnen"><img src="ABSOLUTE_URL/youtube.png" alt="YouTube-Video &ouml;ffnen" /></a>
</object>
Quelle: <a href="https://www.youtube.com/watch?v=ID" target="_blank" title="YouTube-Video &ouml;ffnen">YouTube</a>

1. Zeile: Hier trägt man die ID des Videos ein. Einfach das YouTube-Video öffnen und den 11-stelligen Code hinter „v=“ kopieren. Außerdem gibt man noch Breite und Höhe an. Das ist die Größe, in der das Video im Blog erscheint. Bei mir 500×306 (16:9).

2./3. Zeile: Hier trägt man auch nochmal die ID ein. Warum der Aufruf hier erneut auftaucht, ist im Artikel von Drew erklärt. Das fs=1 bedeutet, dass man das Video auch auf Fullscreen schalten kann. Das wird dann auch nochmal im Parameter übergeben.

4. Zeile: Damit wird der Hintergrund des Flash-Films deckend eingestellt. Auf langsamen Rechnern hat man früher echt gemerkt, dass Flashfilme mit opakem wmode weniger Resourcen gebraucht haben. Aus Performance-Gründen sollte man das auch hier tun.

5./6. Zeile: Wenn kein Flash vorhanden ist oder nicht angezeigt werden darf, wird dieser Ersatz-Bereich eingeblendet. YouTube hat hier gar nichts vorgesehen, deshalb kommt in den betroffenen Feedreadern natürlich auch nichts raus. Die ID muss hier auch rein.

Die Grafik „youtube.png“ müsst Ihr selbst basteln. Alternativ dürft Ihr meine runterladen (siehe unten). Legt sie auf Euren Server und fügt den absoluten Link (http-blabla) ein. Sinnvoll ist es, wenn die Grafik keinen Deeplink-Schutz hat.

7. Zeile: Falls nicht mal der Ersatz-Code funktionieren sollte, wird zumindest noch dieser Link angezeigt. Das ist die absolut todsichere Fallback-Methode. Spätestens hier sollte jedem Feed-Leser klar werden, dass an der Stelle ein Video zu sehen sein sollte.

Und so sieht das dann aus:

Video bei YouTube ansehen

Mit sechs Zeilen hat man ein YouTube-Video perfekt eingebunden und in Feedreadern, die das Flash-Video nicht anzeigen wollen, wird nun statt gar nix einfach die folgende Grafik angezeigt. Die kann man dann anklicken und das Video direkt bei YouTube ansehen:

Video bei YouTube ansehen

Das dürfte für alle reichen, die hin und wieder ein YouTube-Video einbauen. Wer aber öfter Videos verwendet, findet das natürlich umständlich. Für den Fall habe ich einen Shortcode der Sorte [ youtube]ID[/youtube ] gebastelt (wird bei mir schon verwendet).

Im dritten Teil erkläre ich dann, wie man das bewerkstelligt.

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.