Nachdem ich das heute wieder gebraucht habe, werde ich mal erklären, wie man Youtube Videos XHTML valide einbauen kann.
Da Youtube noch mit embed arbeitet kann 1 eingefügtes Video mit dem Standard “Einbetten” Code schon 7 oder mehr Fehler in der XHTML Validität erzeugen.
Für jemanden, der darauf wert legt (wie ich), ist da praktisch eine Katastrophe :D

Sehen wir uns den Aufbau eines Standard-Einbetten-Codes von Youtube einmal an:

1
2
3
4
5
6

<object width="480" height="295">
<param name="movie" value="http://www.youtube.com/v/lQ3D4CqHbJM&hl=de&fs=1&color1=0x006699&color2=0x54abd6"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/lQ3D4CqHbJM&hl=de&fs=1&color1=0x006699&color2=0x54abd6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></embed>
</object>

Eine Menge Kram, alles nicht valide nach heutigen Standards.
Hier sind die wichtigen Eigenschaften des Videos nochmal auf einen Blick:

  • In Zeile 1 steht sowohl Breite als auch Höhe, hier 480×295
  • In Zeile 2 sowie 5 finden wir die VideoID (youtube.com/v/[VideoID]), in diesem Fall lQ3D4CqHbJM
  • Hinter der VideoID sind noch weitere Parameter für Farbe, Rahmen und son Kram, im Beispiel &hl=de&fs=1&color1=0x006699&color2=0x54abd6

Schauen wir uns jetzt den XHTML Transitional validen Code an:

1
2
3

<object type="application/x-shockwave-flash" width="425" height="261" data="http://www.youtube.com/v/lQ3D4CqHbJM">
<param name="movie" value="http://www.youtube.com/v/lQ3D4CqHbJM&amp;hl=de&amp;fs=1&amp;color1=0x006699&amp;color2=0x54abd6&amp;fmt=18" />
</object>

Was hat sich geändert?:

  • Breite und Höhe sind anders, ist nur so, damit es in meinen Blog passt. Sie werden weiterhin mit height=”***” und width=”***” angegeben.
  • Die VideoID lQ3D4CqHbJM steht jetzt in data=” * ” in Zeile 1 und auch in Zeile 2
  • Die Parameter stehen in Zeile 2 hinter der VideoID und an das “&” ist “amp;” gehangen geworden.

Wie baut ihr nun also schnell ein Youtube Video valide ein?
1. Kopiert euch aus dem Standard-Einbetten-Code aus Youtube die VideoID und die Parameter heraus, also: lQ3D4CqHbJM&hl=de&fs=1&color1=0x006699&color2=0x54abd6
2. Nehmt euch den validen Code von mir und ersetzt meine VideoID und Parameter mit euren.
3. Sucht in diesem Code nach allen “&” und fügt immer “amp;” hinten an, bis keine “&” mehr vorhanden sind.
Fertig!

So, durch diesen Post handel ich mir natürlich viele Fehler im Code ein, aber das ist der Preis für Aufklärung ;)