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=2331852903610109378El “texto-para-el-enlace” es… adivinen qué. Puede contener espacios.
Acá un ejemplo: [youtube PDxMQaMqsig Sigur Ros: Hoppipolla] genera lo siguiente
Reacciones
Enlace para Trackbacks | Ir a escribir un comentario
6 Trackbacks/Pingbacks
14 Comentarios
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
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.
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.
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!
@
Cesarius: el elemento
objectacepta un elementoimgcomo “hijo”. Si el navegador no tiene instalado el plugin adecuado para abrir el tipo de archivo especificado por el atributotype, se muestra la imagen.Esto también funciona en lectores de feeds, p.ej, Bloglines.
gracias por la información, pero para salir de la duda como sería la sintaxis… por ejemplo con un video de youtube.
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)
Gracias por tu pronta respuesta! Jeje podrías compartir el plugin ya editado no?
Saludos
Ideal, siempre me he preguntado como hacer para que el código fuese válido. Gracias.
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.
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.
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?
me gusto
@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
objectoembeden 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.Deje un comentario