Chimicherrychanga

Videos von YouTube valide einbinden

Informatik von Seba

Was YouTube einem an Code zum Einbetten gibt, ist weit davon entfernt, valide zu sein. Vermutlich, weil der Anbieter eine höchstmögliche Kompatibilität mit allen Browsern erreichen möchte. Was eigentlich ein Schlag in die Magengrube der Webstandards ist, die für eine einheitliche Darstellung in die Welt gesetzt wurden.

So ähnlich sieht der Code aus, wie YouTube ihn bereitstellt.

<object width="425" height="344">

	<param
		name="movie"
		value="[…]/v/NvE8XO6YH6o&hl=de&fs=1">
	</param>
	<param name="allowFullScreen" value="true">
	</param>
	<param name="allowscriptaccess" value="always">
	</param>

	<embed
		src="[…]/v/NvE8XO6YH6o&hl=de&fs=1"
		type="application/x-shockwave-flash"
		allowscriptaccess="always"
		allowfullscreen="true"
		width="425" height="344">
	</embed>

</object>


Entledigen wir uns erst einmal des embed, indem wir die wichtigen Informationen in das object umsiedeln; aus dem Attribut src wird dabei data; der Rest wird bereits über param übergeben. Embed wurde von Netscape eingeführt und alle Browser haben es aufgegriffen; ein Standard wurde es nie.

<object
	width="425" height="344"
	type="application/x-shockwave-flash"
	data="[…]/v/NvE8XO6YH6o&hl=de&fs=1">

	<param
		name="movie"
		value="[…]/v/NvE8XO6YH6o&hl=de&fs=1">
	</param>
	<param name="allowFullScreen" value="true">
	</param>
	<param name="allowscriptaccess" value="always">
	</param>

</object>


Jetzt noch anstatt & („Ampersand“) dessen Entität (&amp;) angeben und optional die param als leere Elemente kennzeichnen, ohne schließendes Tag.

<object
	width="425" height="344"
	type="application/x-shockwave-flash"
	data="[…]/v/NvE8XO6YH6o&amp;hl=de&amp;fs=1">

	<param
		name="movie"
		value="[…]/v/NvE8XO6YH6o&amp;hl=de&amp;fs=1" />
	<param name="allowFullScreen" value="true" />
	<param name="allowscriptaccess" value="always" />

</object>


Unser Ergebnis: Valides XHTML 1.0 Strict. Wer es jetzt genauer wissen möchte, den verweise ich auf diese beiden großartigen Artikel: A List Apart: Flash Satay und A List Apart: Bye Bye Embed.

4 Kommentare

  1. avatar Chris
    Ein tolles Youtube Plugin für Wordpress , was ich sehr empfehlen kann befindet sich auf www.bassistance.de . Nach der Installation muss man lediglich [youtube id] angeben =)
  2. avatar Christoph
    oh ich werde mir nie die Mühe machen das so in toll valid umzuschreiben.


    Es funktioniert doch auch so, ich weiß nicht wo das Problem ist.

    Die bei Youtube sind so dumm jetzt sicher auch nicht.
  3. avatar Seba
    1. Sich an Web Standards zu halten, garantiert, dass die Seite auch in Zukunft korrekt dargestellt werden wird.

    2. Wer sich mit Web Development, Web Standards, Web Irgendwas beschäftigt, wirkt unprofessionell, wenn seine Seite nicht valide ist.

    3. Der Code ist kürzer und übersichtlicher.

    Valides XHTML 1.0, HTML 4.01 etc. sind verschiedene Dialekte einer Sprache, aber alle wunderbar verständlich. Invalider Code ist ein Besoffener der dich schwer verständlich anlallt; so aus Sicht des Browsers gesprochen. :)

    YouTube wird seine Gründe für die Entscheidung haben. Doch das macht es nicht per se zur besten Lösung.
  4. avatar Seba
    @Chris: Das PlugIn habe ich mir jetzt mal angeschaut. Erzeugt valides XHTML, sehr gut. :)

Und jetzt du

Do not fill in these four fields:







Name, Mail und URL sind freiwillige Angaben. E-Mail-Adressen werden weder veröffentlicht noch weitergegeben. Verwendbares HTML: <a href=""> <abbr title=""> <blockquote> <cite> <code> <del> <i> <em> <b> <strong>