http://www.YouTube.com

Insertar videos de YouTube con XHTML válido

El problema

Si son de aquellos a quienes nos gusta mantener un código válido y además gusta de insertar videos de en tu blog, seguramente se habrán dado cuenta del horroroso código que algunos proveedores entregan para insertar los videos.

Por ejemplo, veamos el código que entrega YouTube:

<object width="425" height="350">
	<param name="movie" value="http://www.youtube.com/v/PsRkU7FV4aw"></param>
	<param name="wmode" value="transparent"></param>
	<embed src="http://www.youtube.com/v/PsRkU7FV4aw" 
	type="application/x-shockwave-flash" wmode="transparent" 
	width="425" height="350">
	</embed>
</object>

El problema es que el elemento <embed /> no es válido, o más bien, no existe en las especificaciones del W3, sino que es un invento de Netscape (de aquellos tiempos en que su navegador aún era importante). Por otra parte, object sí es válido, pero si insertáramos el código precedente sin ninguna otra modificación que remover el elemento embed, los usuarios de Firefox no verían nada.

La solución

La solución: utilizar object pero especificando un atributo fundamental, type="application/x-shockwave-flash". El código válido quedaría de esta forma:

<object width="425" height="350" 
type="application/x-shockwave-flash" 
data="http://www.youtube.com/v/PsRkU7FV4aw">
	<param name="movie" value="http://www.youtube.com/v/PsRkU7FV4aw" />
	<param name="wmode" value="transparent" />
</object>

Facilitando las cosas

Como (casi) siempre, existe una manera más fácil de hacer las cosas, y en este caso como en muchos otros pasa por un plugin para WordPress: con Embedded video with Link podrás insertar videos de YouTube, Google Video y un par de sitios alemanes de alojamiento de videos que no creo que sean muy populares entre ustedes, lectores de este blog ;)

Una vez instalado, puedes insertar videos de la siguiente forma:

[youtube id-del-video texto-para-el-enlace]
[google id-del-video texto-para-el-enlace]

La “id-del-video” es una cadena de caracteres que forma parte de la dirección de cada video:

http://www.youtube.com/watch?v=PDxMQaMqsig
http://video.google.com/videoplay?docid=2331852903610109378

El “texto-para-el-enlace” es… adivinen qué. Puede contener espacios.

Acá un ejemplo: [youtube PDxMQaMqsig Sigur Ros: Hoppipolla] genera lo siguiente

[youtube PDxMQaMqsig Sigur Ros: Hoppipolla]

Más información

  1. Embed
  2. Object
  3. Param
  4. Bye Bye Embed