Valor incorrecto “X%” para el atributo “width” en el elemento “video”: se esperaba un dígito pero se encontró “%” en su lugar.

La especificación HTML define el atributo width en <video> como un “entero no negativo válido”, lo que significa que debe consistir solo en dígitos (por ejemplo, 640). No puede incluir unidades como px, em, o %. Cuando escribes algo como width="100%", el validador espera un carácter de dígito pero encuentra el signo %, produciendo este error.

Este es un error común porque CSS permite valores de porcentaje para width, y algunos elementos HTML más antiguos (como <table>) históricamente aceptaban valores de porcentaje en sus atributos width. Sin embargo, el elemento <video> sigue la especificación HTML moderna, que restringe width solo a enteros de píxeles.

Por qué esto importa

• Cumplimiento de estándares: Los navegadores pueden interpretar valores de atributo inválidos de manera impredecible. Aunque la mayoría de los navegadores modernos podrían ignorar el % e intentar analizar el número, este comportamiento no está garantizado.
• Se pierde la intención de diseño responsivo: Incluso si un navegador intenta manejar width="100%", puede tratarlo como width="100" (100 píxeles CSS), lo que casi seguramente no es lo que pretendías.
• Accesibilidad y consistencia: El marcado válido asegura que las tecnologías de asistencia y todos los navegadores rendericen tu contenido como se espera.

Cómo solucionarlo

Si necesitas un ancho fijo en píxeles, establece el atributo width a un entero simple. Si necesitas un ancho responsivo o basado en porcentajes, elimina completamente el atributo width y usa CSS.

Ejemplos

❌ Inválido: valor de porcentaje en el atributo width

<video controls width="100%">
  <source src="/media/video.mp4" type="video/mp4">
</video>

✅ Corregido: usando un entero de píxeles para un ancho fijo

<video controls width="640" height="360">
  <source src="/media/video.mp4" type="video/mp4">
</video>

✅ Corregido: usando CSS para un ancho basado en porcentajes

<video controls style="width: 100%;">
  <source src="/media/video.mp4" type="video/mp4">
</video>

✅ Corregido: usando una hoja de estilos externa para video responsivo

<style>
  .responsive-video {
    width: 100%;
    max-width: 800px;
    height: auto;
  }
</style>

<video controls class="responsive-video">
  <source src="/media/video.mp4" type="video/mp4">
</video>

El enfoque CSS es generalmente preferido para diseños responsivos porque te da mucho más control: puedes combinar width, max-width, y height: auto para crear un video que se escale proporcionalmente dentro de su contenedor. Los atributos HTML width y height se usan mejor cuando quieres especificar las dimensiones intrínsecas del video en píxeles, lo que también ayuda al navegador a reservar la cantidad correcta de espacio antes de que el video se cargue, reduciendo los cambios de diseño.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Iniciar prueba gratuita Ver precios