Validación HTML: Valor incorrecto "auto" para el atributo "width" en el elemento "video": Se esperaba un dígito pero se encontró "a".

Acerca de este problema HTML

La especificación HTML define el atributo width en <video> (y <img>, <canvas>, etc.) como un “entero no negativo válido”, lo que significa que debe consistir únicamente en dígitos como "640" o "1280". Valores como "auto", "100%", o "50vw" no están permitidos en el atributo HTML en sí — estos son conceptos CSS, no valores de atributos HTML válidos.

Esto importa por varias razones. Primero, los navegadores usan los atributos HTML width y height para reservar la cantidad correcta de espacio en el diseño antes de que se cargue el vídeo, lo que previene el cambio de diseño de contenido (CLS). Cuando el valor es inválido, el navegador puede ignorarlo completamente, llevando a saltos en el diseño mientras la página se carga. Segundo, los atributos inválidos pueden causar comportamientos de renderizado impredecibles entre diferentes navegadores. Tercero, el cumplimiento de estándares asegura que tu marcado sea a prueba de futuro y funcione de manera confiable con tecnologías asistivas.

Una razón común por la que los desarrolladores establecen width="auto" es para hacer el vídeo responsivo. La forma correcta de lograr esto es a través de CSS en lugar del atributo HTML. Puedes seguir estableciendo los atributos width y height con enteros válidos para definir la proporción de aspecto intrínseca del vídeo (lo que ayuda al navegador a reservar espacio), y luego sobrescribir el tamaño de visualización con CSS.

Cómo solucionarlo

Reemplaza "auto" con un entero válido que represente el ancho en píxeles deseado.
Si necesitas dimensionado responsivo, elimina el atributo width o mantenlo para la sugerencia de proporción de aspecto, y usa CSS para controlar el tamaño renderizado.

Ejemplos

❌ Inválido: Usando `"auto"` como atributo width

<video width="auto" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Esto desencadena el error porque "auto" no es un entero no negativo.

✅ Solucionado: Especificando un valor de píxeles válido

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Los atributos width y height usan enteros simples — sin unidades, sin palabras clave. El navegador los interpreta como píxeles.

✅ Solucionado: Vídeo responsivo usando CSS

Si quieres que el vídeo se escale fluidamente con su contenedor, usa CSS en lugar del atributo HTML:

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

<video class="responsive-video" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

En CSS, width: 100% y height: auto son perfectamente válidos y harán que el vídeo se escale para llenar su contenedor mientras mantiene su proporción de aspecto.

✅ Mejor práctica: Combinar atributos HTML con CSS

Para lo mejor de ambos mundos — estabilidad de diseño y dimensionado responsivo — proporciona los atributos width y height para la sugerencia de proporción de aspecto, luego sobrescribe con CSS:

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

<video class="responsive-video" width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Aquí, los atributos width="640" y height="360" le dicen al navegador la proporción de aspecto intrínseca 16:9 del vídeo, para que pueda reservar la cantidad correcta de espacio antes de que el vídeo se cargue. El CSS max-width: 100% asegura que el vídeo nunca exceda su contenedor, y height: auto mantiene la proporción de aspecto intacta. Este enfoque minimiza el cambio de diseño mientras permanece completamente responsivo.