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)

Dejar comentario (16) ▼ · Escrito el 5-Jan-2008 · Ver menciones
Recomendar por correo · Meneame · Añadir a del.icio.us

Páginas: 1 ... ... 1


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

6 consultas efectuadas / Página generada en 0.046 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)