Insertar videos de YouTube con XHTML válido

Cómo insertar un video con código XHTML válido, y cómo hacerlo aún más fácil utilizando un plugin para WordPress

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

29 thoughts on “Insertar videos de YouTube con XHTML válido

  1. En mi caso utilizo Extreme Video Plugin, que permite ver casi todos los formatos de video, muy recomendado.

    Por cierto… cómo logras poner ese mensaje en los feeds para indicar que existe un video ??? me interesa saber como lo logras.

    Saludos

  2. Pingback: SigT
  3. Personalmente lo hago a mano, pero el enlace al video en YouTube lo meto dentro del tag object, de esa forma si el navegador no puede representar el object (muchos lectores de feeds, por ejemplo) mostrará el enlace.

  4. Cesarius: el elemento object acepta un elemento img como “hijo”. Si el navegador no tiene instalado el plugin adecuado para abrir el tipo de archivo especificado por el atributo type, se muestra la imagen.

    Esto también funciona en lectores de feeds, p.ej, Bloglines.

  5. gracias por la información, pero para salir de la duda como sería la sintaxis… por ejemplo con un video de youtube.

  6. El del mismo video incluido en este post:

    <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/PDxMQaMqsig" width="425" height="350">
    <param name="movie" value="http://www.youtube.com/v/PDxMQaMqsig" />
    <img src="http://www.yukei.net/wp-content/objectplaceholder.jpg" alt="Objeto multimedia" />
    </object>

    Para hacerlo de forma automática edité el plugin; es bastante sencillo una vez que comprendes la lógica con que funciona… que es bastante sencilla (por eso he podido comprenderla) 😉

  7. El código está muy bien, pero si queremos tener habilitado el parametro wmode con la transparencia no valida ya que hay que meter el wmode=”transparent” como un argumento más de object.

    Hay alguna solución esto.

  8. Pingback: Perfect Wave
  9. Hola soy nuevo aqui, y me encantaria meter un video en you tube, como se mete?? por favor agradeceria mucho si me explicaran como se mete , Gracias un saludo coordial.

  10. pues yo estoy haciendo pruebas con el plugin Embedded video with Link y pone los videos correctamente pero cuando recibo los feeds en el lector Vienna solo me pone el enlace, sin embargo veo correctamente videos de otros feeds ¿a qué puede ser debido?

  11. @stanis: aunque llega “un poco” tarde la respuesta… en realidad, el soporte de los lectores de feeds para los elementos multimedia (que estén insertos mediante object o embed en el código) no suele funcionar igual que en navegadores, ya que en muchos casos simplemente no se muestran o bien requieren de código bien formado, que como has podido ver en el post, no es lo que te entregan en YouTube cuando quieres pegar un video en un post (y es lo que la mayoría de las personas ocupa). Por ello es que este plugin inserta también el link, ya que de otro modo ni siquiera te enterarías que existe un video en el post original… probablemente no es la mejor solución, pero al menos funciona… un poco.

  12. Pues yo no se de código html, pero me funciono el código aqui expuesto para insertar un vídeo en hotmail.
    La cuestión es que en el correo de yahoo no sebe mas que el codigo. Eso a que se debe? Gracias de antemano.

  13. Excelente el codigo me funciono de mil maravillas, justo lo que me interesaba era pasar la validacion de la w3c, y lo hizo con este codigo simplificado. Ahora es esto compatible con todos los navegadores? Muchas Gracias

Comments are closed.

%d bloggers like this: