Youtube Videos XHTML valide einbinden

Das Einbauen eines Videos gestaltet sich auf den ersten Blick simpel. Auf der Website von Youtube findet sich zu jedem Video auf der rechten Seite ein Feld mit der Überschrift namens Einbetten. Hier kann man sich einen vorgefertigten Code kopieren und in sein HTML-Dokument einbinden. Vom Ergebnis funktioniert dieser Code auch in den allermeisten Browsern. Allerdings hat dieser Code einen gravierenden Nachteil: Er entspricht nicht den (X)HTML Vorgaben des W3C und ist somit nicht valide. Als Folge wird das gesamte HTML-Dokument als nicht standardkonform angesehen.

Warum bietet Youtube einen invaliden Code an?

Dahinter steht die Absicht, einen Code anzubieten, der auch auf Uraltbrowsern funktioniert – schließlich möchte Youtube als kommerzieller Anbieter ja keinen Kunden verlieren. Im normalen Webleben würde man jetzt anfangen, mit Hacks, Browserweichen oder Conditional Comments zu hantieren (siehe hierzu im Buch Seite 138). Youtube ist aber gezwungen eine einfache Lösung anzubieten, und versucht deshalb mit einem Code alles abzufangen, auch wenn es die Validität kostet. Zumindest reime ich mir das so zusammen.

Warum ist der Code invalide und wie funktioniert eine Lösung?

Ein von Youtube angebotener Code sieht folgendermaßen aus: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<object width="425" height="344">
 
  <param
    name="movie"
    value="http://www.youtube.com/v/uNRA4Ds7hbo&hl=de&fs=1&rel=0">
  </param>
  <param name="allowFullScreen" value="true">
  </param>
  <param name="allowscriptaccess" value="always">
  </param>
 
  <embed
    src="http://www.youtube.com/v/uNRA4Ds7hbo&hl=de&fs=1&rel=0"
    type="application/x-shockwave-flash" allowscriptaccess="always"
    allowfullscreen="true"
    width="425" height="344">
  </embed>
 
</object>

Zwei Aspekte führen dazu, dass der Code nicht valide ist:

  1. das embed-Element
  2. die fehlende Maskierung

embed ist ein Element was aus grauen Netscape Urzeiten resultiert. Wer sich für die Hintergründe interessiert, findet hier Informationen. Ein Weg der den grammatikalischen Vorgaben des W3C genügt ist hingegen die Einbindung mithilfe des Elements object. Wir müssen den Code also wie folgt umstellen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<object
 
  width="425" height="344"
  type="application/x-shockwave-flash"
  data="http://www.youtube.com/v/uNRA4Ds7hbo&hl=de&fs=1&rel=0">
 
  <param
    name="movie"
    value="http://www.youtube.com/v/uNRA4Ds7hbo&hl=de&fs=1&rel=0">
  </param>
  <param name="allowFullScreen" value="true">
  </param>
  <param name="allowscriptaccess" value="always">
  </param>
 
</object>

Ebenfalls nicht standardkonform ist die fehlende Maskierung (siehe auch im Buch Seite 31). Deshalb werden wir nun im zweiten Schritt & (Ampersand) mit dem korrekten Gegenstück

&amp;

austauschen. Das komplettierte Ergebnis sieht wie folgt aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<object
 
  width="425" height="344"
  type="application/x-shockwave-flash"
  data="http://www.youtube.com/v/uNRA4Ds7hbo&amp;hl=de&amp;fs=1&amp;rel=0">
 
  <param
    name="movie"
    value="http://www.youtube.com/v/uNRA4Ds7hbo&amp;hl=de&amp;fs=1&amp;rel=0">
  </param>
  <param name="allowFullScreen" value="true">
  </param>
  <param name="allowscriptaccess" value="always">
  </param>
 
</object>

Das Endergebnis können Sie in meinem Artikel RSS-Feed Anleitung “bewundern”. Obigen Code können Sie in Zukunft immer als Vorlage benutzen. Einfach die Beispiel-URL durch die URL im eingebetteten Youtube-Code ersetzen, Code ins HTML-Dokument kopieren, fertig!

Kategorien: Anfänger, Webdesign.
Schlagwörter: .

Einen Kommentar schreiben

RSS-Logo Kommentare zu nur diesem Artikel können Sie als RSS 2.0 Feed abonnieren.