¡Foto!

¡Envia tu foto al Fotomaton!

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

16 comentarios · 2.221 lecturas · html y css

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)

16 comentarios · Escrito el 5-Jan-2008 · Ver menciones
Recomendar por correo · Meneame · Añadir a del.icio.us

Conexión a internet más rápida y veloz.

16 Comentarios


#1 Publicado hace 5 meses
Otsoko Lector

Navegando con Mozilla Firefox
Bajo Windows XP

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.

#2 Publicado hace 5 meses
Nacho 001 Premium

Navegando con Mozilla Firefox
Bajo Windows Vista

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.

#3 Publicado hace 5 meses
InKiLiNo Lector

Navegando con Mozilla Firefox
Bajo Macintosh

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

#4 Publicado hace 5 meses
Matt Lector

Navegando con Mozilla Firefox
Bajo Windows XP

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

#5 Publicado hace 5 meses
Dondado Lector

Navegando con Mozilla Firefox
Bajo Ubuntu Linux

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

#6 Publicado hace 5 meses
rubendomfer Lector

Navegando con Mozilla Firefox
Bajo Windows XP

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 ;-)

#7 Publicado hace 5 meses
Manz Administrador

Navegando con Mozilla Firefox
Bajo Windows XP

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.

#8 Publicado hace 5 meses
Nacho 001 Premium

Navegando con Mozilla
Bajo Windows Vista

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.

#9 Publicado hace 5 meses
manolito Lector

Navegando con Mozilla Firefox
Bajo Ubuntu Linux

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

#10 Publicado hace 5 meses
Public Enemy Lector

Navegando con Mozilla Firefox
Bajo Windows XP

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.

#11 Publicado hace 5 meses
Javi Lector

Navegando con Mozilla Firefox
Bajo Windows XP

Hola a la comunidad ^^:

Ese video me lo mando una amiga xD, me parti mucho. Saludos desde Tenerife Manz :D .

#12 Publicado hace 4 meses
Dondado Lector

Navegando con Mozilla Firefox
Bajo Ubuntu Linux

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

#13 Publicado hace 3 meses
RICARDO RIOS Lector

Navegando con Mozilla Firefox
Bajo Windows XP

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

#14 Publicado hace 3 meses
JuanFer Lector

Navegando con Mozilla Firefox
Bajo Windows XP

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.

#15 Publicado hace 2 meses
Veronica Lector

Navegando con Internet Explorer
Bajo Windows XP

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:

#16 Publicado hace 3 semanas
Alejandro Lector

Navegando con Mozilla Firefox
Bajo Windows XP

Gracias me has ahorrado mucho trabajo

Deja tu comentario


en Internet.




Consejos


  • Los comentarios fuera del tema del artículo (OFF-TOPIC) serán eliminados.
  • Escribir completamente en MAYUSCULAS en Internet equivale a GRITAR y está mal visto.
  • No utilices lenguaje SMS, en Emezeta no te cobramos por letras escritas.
  • No hagas publicidad de tu página o dejes enlaces en el comentario para aumentar el PR o la popularidad en buscadores. En Emezeta se aplica el tag nofollow, que hace que Google ignore esos enlaces.
  • No insultes. Al escribir un comentario tus datos quedan almacenados y serás el único responsable de tus palabras. Se permite la libertad de expresión y de opinión, pero no los comentarios ofensivos.
  • Puedes insertar algunas etiquetas HTML en los comentarios: em, a href, b, i, em, code, acronym y strong.
  • Es posible añadir una foto junto a tus comentarios, para ello sólo tienes que personalizarla en Gravatar. [?]

Envía tu foto


Fotomatón Emezeta

Envia tu fotografía al fotomatón de Emezeta. Puedes enviar varias y saldrás en la portada de Emezeta.


Artículo de http://www.emezeta.com/

10 consultas efectuadas / Página generada en 0.045 segundos

Programado íntegramente por José Román (Manz) en XHTML y CSS estándar.

Sindicado bajo Feed RSS. Contenido bajo licencia Creative Commons

Estadísticas de visitas · Términos y condiciones · Contacto · Publicidad · Preguntas frecuentes (FAQ)