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

29 responses to “Insertar videos de YouTube con XHTML válido”

  1. Cesarius says:

    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. SigT says:

    WordPress Plugin Embedded video link…

    Leo en el Planet Webdev un post de Yukei sobre insertar vídeos en el blog de forma estándar si bien ya comente lo mismo en esta ocasión Yukei comenta sobre un plugin llamado WordPress Embedded video link que facilita la inserción:

    [youtube id-del…

  3. Francisco says:

    Hace un tiempo cree un pequeño script para los que no quieren instalar plugins, el cual sirve para generar un código válido como XHTML 1.0 Strict.

    Si lo queres probar, también creé una “extensión” de Firefox, para ayudar a los que lo quieran usar.

  4. YoNoSoyTu says:

    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.

  5. gutielua says:

    Para que se complican la vida, usen esten este plugin, esta de lux!

    WP-FLV , A WordPress Plugin for inserting a Flash Video Player – RMNL
    http://roel.meurders.nl/wordpress-plugins/wp-flv-video-player-plugin/

    Regards!

    @

  6. 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.

  7. Cesarius says:

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

  8. 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) 😉

  9. Cesarius says:

    Gracias por tu pronta respuesta! Jeje podrías compartir el plugin ya editado no? 😉

    Saludos

  10. markdbd says:

    Ideal, siempre me he preguntado como hacer para que el código fuese válido. Gracias.

  11. silva says:

    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.

  12. […] El problema del MP3 lo resolví enseguida, pero el de los vídeos embebidos seguía pendiente. Pues bien, acabo de leer un comentario de Mario Molina que me ha alegrado la mañana. Mario me ha informado amablemente de la existencia de un plugin para WordPress, Embedded Video with Link, que genera código XHTML válido y que además es muy fácil de utilizar. Mario no sólo me ha dado la referencia del plugin, sino la de una entrada de Yukei.net que explica, en perfecto castellano, cómo lograr resultados óptimos con este complemento. […]

  13. […] Siendo así… aquellos que prefieran seguir comulgando con el W3C y los Estándares Web, crear un código válido e igualmente funcional es así de sencillo: Vía: lo encontré en otro sitio pero la fuente parece que es del siempre genial Yukei. […]

  14. […] trackback de Yukei nos lleva a su post donde se explica el origen del problema y se enlaza un plugin, Embedded video […]

  15. Perfect Wave says:

    […] con XHTML válido Sábado marzo 24th 2007, 11:51 pm Guardado en: Videos, Software El trackback de Yukei nos lleva a su post donde se explica el origen del problema y se enlaza un plugin, Embedded video […]

  16. elias says:

    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.

  17. stanis says:

    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?

  18. […] » Cómo poner un vídeo de YouTube en un blog Código válido en XHTML de tus vídeos preferidos Insertar videos de YouTube con XHTML válido — yukei.net GSvideoBar Solution WengoVisio.com: video […]

  19. marcos says:

    me gusto

  20. @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.

  21. […] plugin ( Embeded video with link ) Más información en ( Yukei ) Página oficial del plugin ( jovelblog ) ¿Eres nuevo por aquí? Te recomiendo suscribirte […]

  22. Hola: Espero que esten bien.

    No se si me puedar apoyar, ojala que si.

    Estoy realizando un sitio y en el cual pongo una página con códigos de videos de YouTube. Los video si aparece con Foirefox pero en iExplorer no.
    La página es: http://www.tendenciayvision.com/hostosger/pionerosdepara.html.

    Uno de los codigos es: .

    Quiero saber si existe algun error.

    Agradezco mucho su atención y apoyo

    Saludos.

  23. ericki9614 says:

    como insertar videos

  24. siempre_tarde says:

    @elias: léelo en la web de YouTube® . Allí te explican cómo se hace paso por paso.

  25. Lehunam says:

    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.

  26. 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

  27. Diego López Ordóñez says:

    Las instrucciones no sirven. No sale nada.

  28. […] trackback de Yukei nos lleva a su post donde se explica el origen del problema y se enlaza un plugin, Embedded video […]

%d bloggers like this: