Insertar videos de YouTube con XHTML válido

Insertar un video de YouTube en tu blog es muy sencillo. Basta con copiar y pegar el HTML que se nos proporciona. Pues bien, si simplemente hacemos esto la página resultante no va a ser XHTML válido.

Para que los videos de Youtube aprueben la validación de la W3C (estándar web de la correcta codificación y uso de HTML y XHTML) debemos realizar unas pequeñas modificaciones al código original que nos proporciona Youtube.

Si bien el posicionamiento de una web o blog en los buscadores no se ve directamente influenciado al tener una correcta validación de plantilla acorde con los lineamientos de la W3C, sí le da a éstas una mejor y correcta estructura que le facilita el trabajo a los robots de Google.

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.

Un ejemplo: [youtube PDxMQaMqsig Sigur Ros: Hoppipolla]