Credit image

¿Te gusta el diseño web? ¡Echa un vistazo a la documentación de LenguajeCSS.com!

Youtube estándar con (X)HTML válido

Youtube proporciona un código que copiar y pegar en nuestro blog para reproducir los videos de una forma rápida y sencilla, pero el código no es todo lo correcto que debiera. Veamos como corregirlo.

El código para insertar un video de Youtube (o análogos como metacafe, dailymotion, etc..) en una página que busca cumplir los estándares web es a menudo un quebradero de cabeza para los bloggers y webmasters.

Youtube proporciona un código que copiar y pegar en nuestro blog para reproducir los videos de una forma rápida y sencilla, pero el código no es todo lo correcto que debiera:

Si comprobaramos con el validador W3C este código, veríamos que tiene varios problemas:

  • Se utiliza correctamente el tag object, pero no se especifican ciertos parámetros importantes como data o type.
  • Los tags "unitarios" param en XHTML se deben cerrar en la misma etiqueta de apertura.
  • El uso de la etiqueta no estándar embed puede producir incompatibilidades en navegadores que no la utilicen, así como dispositivos móviles, lectores u otros.
  • No se proporciona un método alternativo en el caso de que no exista soporte para flash.

La solución es bien sencilla. Basta con codificar de la siguiente manera:

Descargar código youtube

En este código se corrigen varios conceptos, pero sobre todo se elimina el uso del tag embed, puesto que se trata de una etiqueta privada que se ha utilizado mucho e irregularmente, pero no es estándar.

  • Se utiliza un object con la dirección del objeto en el atributo data y el MIME en el atributo type.
  • Los tags param se vuelven "unitarios". Así el código es estándar XHTML, y además es compatible con HTML.
  • Accesibilidad: Se añade como método alternativo una imagen que se mostrará en el caso de no disponer del plugin Flash para el navegador. En el caso de no tener tampoco soporte para imagenes (lectores de voz, navegadores de texto, ...) se mostrará el texto del atributo alt de la imagen.

Un problema también muy común en las validaciones suele ser el tema de no codificar correctamente el ampersand (&) en una URL (en el atributo data de object o en value del param), que debería aparecer como &.

Finalmente, tendremos un código para videos o animaciones flash de youtube (u otra entidad similar) completamente estándar:

Escrito por Manz, el , en html. Comentarios recibidos: 19.

19 comentarios de lectores
Otsoko
Otsoko
1

Un buen artículo, la estandarización me parece algo muy importante y sitios como youtube deberían proporcionar el código estandarizado (ya que le dan...). También es verdad que seguir al pie los estándares hace doler un poco la cabeza, jej, pero qué te van a contar a ti Manz.

Nacho 001
Nacho 001
2

Una vez en Wordpress pegue el código de YouTube, y además de no respetar los estándares HTML el reproductor no se mostraba. Pero ahora utilizo un plugin que inserta cualquier reproductor con solo pegar la dirección URL, es mas sencillo y respeta los estándares. No se entusiasmen... este plugin es solo para Wordpress, si están en otro CMS sigan las instrucciones del articulo. Saludos.

InKiLiNo
InKiLiNo
3

Yo simplifique la faena poniéndome un botón en mi editor de Wordpress, y con un simple click tengo el código correcto de cualquier vídeo de Youtube ;) Un poco de Spam :P

Matt
Matt
4

Un muy interesante articulo.. prestaré más atencion a esto...

Dondado
Dondado
5

Gracias, yo había hecho mi propia implementación para que pasase la validación pero la tuya trae más detalles. Además el código lo tengo en un plugin así que con tocar en un sitio los tengo todos corregidos (que supongo que es más o menos lo que hizo inkilino). @Nacho 001, el problema es de wordpress (o al menos en mi caso) y es que al re-editar un post destroza el código al intentar reformatearlo para el editor visual, la solución pasa por el plugin, pero las modificaciones que propone Manz también se pueden implementar dentro del plugin (yo así lo tengo hecho como he dicho antes).

rubendomfer
rubendomfer
6

Una duda, los vídeos que publicas con ese código en Webs importantes como google reader no se ven (se ve la imagen alternativa) ¿Hay que añadir/eliminar algo al código para que se vean al menos en google reader? Muy interesante la entrada ;-)

Manz
Manz
7

RubenDomFer, interesante cuestión. Quizás me equivoque, pero creo que el problema es de los user agents, en este caso el lector de feeds. El problema es que la mayoría sólo interpretan contenido flash con el tag embed, cuando deberían hacerlo con el object.

Nacho 001
Nacho 001
8

Dondado: Si, al parecer es problema de Wordpress, por que en Flatpress no pasa, lo malo que tiene Flatpress es que es medio truchito. Saludos.

  • 1
manolito
manolito
9

Interesante... si mi blog fuera mío y no de blogger, intentaba hacerme un script para corregir tooodos los vídeos del youtube. Pero como no es asín creo que se van a tener que quedar como están. Eso si, tengo esta página en marcadores para más adelante :P

Public Enemy
Public Enemy
10

Yo lo que no entiendo es porqué no proporcionan el código ya válido y nos ahorran tener que modificarlo a mano, via plugins o como cada uno lo tenga preparado.

Javi
Javi
11

Hola a la comunidad ^^: Ese video me lo mando una amiga xD, me parti mucho. Saludos desde Tenerife Manz :D .

Dondado
Dondado
12

¿Y me dejas robarte la imagen que utilizas como contenido alternativo?

RICARDO RIOS
RICARDO RIOS
13

Creo que el codigo no funciona en mozila como se pude solucionar este punto en el codigo????

JuanFer
JuanFer
14

Hola Manz, acabo de probar el código (si, un poco tarde ó_ò) y funciona muy bien, sólo resaltar un matiz, utilizando un DTD transitional funciona muy bien, sin embargo, utilizando el strict hay un error al validar ya que no se admite el atributo border dentro del elemento image, sólo indicar que lo del border habría que utilizarlo en la CSS. Por lo demás funciona a la perfección :) Saludos.

Veronica
Veronica
15

sabes ke??? cuando metes un link en forma de variavel que ha venió del banco de datos y to eso , pues no aparece el video.... eso ya no sé porque pasa....alguien lo sabe???? algo como eso:

Alejandro
Alejandro
16

gracias me has ahorrado mucho trabajo

josselin
josselin
17

hola nesesito tu ayuda sobre un estandar wc3que que es y como se hace para validar una pagina cone este estandar me podrias ayudar tengo 16 años y estudfiante..graxias bye

Akasha
Akasha
18

Gracias por el código... me ha sido de utilidad...

XyKyz
XyKyz
19

Gracias por la ayudita. Me faltaba ponerle los tag <param> para que se viese en IE. ;)

Publica tu opinión

Si lo deseas, puedes utilizar el siguiente formulario para publicar tu opinión o responder a alguna de las existentes:

Previsualización

Aquí se previsualizará su comentario. Revise que sea correcto antes de publicarlo.