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.

html
19

Escrito por

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:

youtube code no estándar

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:

youtube code estándar xhtml html

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:

Video (Objeto multimedia)
Manz

19 comentarios

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

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

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
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:

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

Publica tu opinión