Greasemonkey-Script: Valides XHTML für YouTube-Embeds

Update 22.07.2008: Achtung! Das hier vorgestellte Script funktioniert nicht mehr. Ich rate als Alternative zur Benutzung des Scripts “YouTube HTML Valid (with clipboard copy)”, welches den Job auch gut erledigt.

Kürzlich machte man mich darauf aufmerksam, dass mein WordPress-Blog im Internet Explorer nur eingeschränkt anzuschauen sei. Grund: Entweder man müsse beim Betreten der Seite den ActiveX-Tünnef abschalten…

oder die Seite sei nicht betrachtbar.

Nach einigem Suchen fand ich den Fehler: Der Einbettungscode von YouTube-Videos ist nicht XHTML-kompatibel und verursachte diese Meldungen, immer dann wenn ein ein solches Video auf der aktuellen Blogseite eingebettet war. Nebenbei: Warum das in anderen Blogs nicht eintritt verstehe ich nach wie vor nicht.

Nach einer kurzen Webrecherche fand ich einen Blogeintrag auf wildbits.de, der beschreibt wie XHTML-valider Einbettungscode aussehen muss.

<object type=”application/x-shockwave-flash” style=”width:425px; height:355px” data=”http://www.youtube.com/v/VIDEO_ID”>
<param name=”movie” value=”http://www.youtube.com/v/VIDEO_ID”>
</param></object>

VIDEO_ID entspricht dabei der individuellen Zeichenfolge in der URL bzw. im embed-Code, die jedes YouTube-Video hat, z.B. http://www.youtube.com/watch?v=xtXCChuXiUA .

Nachdem ich nun den alten durch obigen, “sauberen” Code ersetzt habe, sind die Videos in meinem Blog auch für diejenigen sichtbar, denen die Existenz besserer Browser als dem IE entgangen zu sein scheinen.

Natürlich ist es eine Sysiphusarbeit, den Code auch für alle alten Artikel auszubessern. Damit das immerhin für zukünftige Videos leichter von der Hand geht, machte ich mich auf die Suche nach einer Möglichkeit, YouTube-Seiten so zu modifizieren, dass sie gleich validen Code in der embed-Box ausspucken. Um’s kurz zu machen: Es gab nichts, was meinen Ansprüchen genügte, weshalb ich ein bereits vorhandes Greasemonkey-Script entsprechend modifizierte. Für den Fall, dass jemand anderes das gebrauchen kann, stelle ich es hier zur Verfügung.

youtube_valid_xhtml_embed.user.js
Download / Installation

Hinweise:

• Zur Benutzung benötigt man den Firefox mit installierter Greasemonkey-Erweiterung. Das Script funktioniert nicht mit Operas UserJS-Funktion.
• Den Player auf der YouTube-Seite anzupassen ist nicht möglich, weil so der embed-Code zurückgesetzt wird.
• Im embed-Code gleich enthalten ist Direktlink zur entsprechenden YouTube-Seite. Den zu belassen ist deshalb empfehlenswert, weil
  • Benutzer freier Betriebssysteme oft kein Flash-Plugin für den YouTube-Player installiert haben, sich das Video aber mit dem Link zumindest im flv-Format herunterladen können.
  • viele Feedreader keine eingebetteten Videos anzeigen.
• Das Video steckt in einem <div>-Container mit der Klasse “vidembed”. So können schnell CSS-Eigenschaften im Stylesheet definiert werden. Beispiel: Wer in die style.css seines WordPress-Themes die Zeile
  .vidembed {font-size:10px; text-align:center; alignment:center;}
  einfügt, bewirkt dass das Video mittig auf der Seite platziert wird und der Direktlink eine Schriftgröße von 10 Pixeln besitzt.
• Das Script ist relativ übersichtlich und leicht anzupassen.