Validación HTML: Valor inválido "auto" para el atributo "height" 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 height en elementos multimedia como <video> como que acepta únicamente un entero no negativo válido. Esto significa que el valor del atributo debe consistir únicamente en dígitos (por ejemplo, "360"), sin unidades, palabras clave u otros caracteres. Cuando escribes height="auto", el validador espera encontrar un dígito como el primer carácter pero encuentra la letra "a", lo que produce el error.

El valor "auto" es un concepto válido en CSS, donde height: auto le dice al navegador que calcule automáticamente la altura del elemento basándose en su relación de aspecto intrínseca o contenido. Sin embargo, los atributos HTML y las propiedades CSS siguen reglas diferentes. El atributo HTML height es una simple pista de dimensión en píxeles — no entiende palabras clave de CSS. Mezclar valores de CSS en atributos HTML es un error común, y aunque los navegadores pueden ignorar silenciosamente el valor inválido, lleva a comportamientos impredecibles: el video puede renderizarse sin ninguna pista de altura, potencialmente causando cambios de diseño mientras el navegador descubre las dimensiones reales del video durante la carga.

Proporcionar un atributo height válido es importante para la estabilidad del diseño. Cuando el navegador conoce las dimensiones del video antes de que se cargue el medio, puede reservar la cantidad correcta de espacio en el diseño de la página, evitando que el contenido salte. Esto mejora la experiencia del usuario y contribuye a mejores puntuaciones de Core Web Vitals (específicamente Cumulative Layout Shift). También asegura que tu HTML sea compatible con los estándares y accesible para tecnologías de asistencia que pueden depender de marcado bien formado.

Cómo solucionarlo

Tienes dos enfoques:

Usar un valor numérico — Reemplaza "auto" con un entero que represente la altura del video en píxeles.
Usar CSS en su lugar — Elimina el atributo height del HTML y aplica height: auto (o cualquier otro valor) vía CSS. Esto es ideal cuando quieres que el video se escale de forma responsiva.

Si quieres que el video mantenga su relación de aspecto mientras se escala, el enfoque CSS es generalmente preferido para diseños responsivos. Puedes combinar un atributo width (o CSS width) con CSS height: auto para permitir que el navegador calcule la altura correcta desde la relación de aspecto intrínseca del video.

Ejemplos

❌ Inválido: Usar “auto” en el atributo HTML

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

Esto desencadena el error de validación porque "auto" no es un entero no negativo.

✅ Corregido: Usar un valor numérico de altura

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

El atributo height es ahora un entero válido. El navegador reserva un área de 640×360 píxeles para el video antes de que se cargue.

✅ Corregido: Usar CSS para dimensionado responsivo

<video width="640" controls style="height: auto; max-width: 100%;">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Aquí el atributo HTML height se elimina por completo. El CSS height: auto asegura que el video se escale proporcionalmente, y max-width: 100% previene que se desborde de su contenedor. Este es un patrón común para video responsivo.

✅ Corregido: Usar ambos atributos con sobrescritura CSS

<video width="640" height="360" controls style="width: 100%; height: auto;">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Este enfoque proporciona lo mejor de ambos mundos: los atributos HTML width y height dan al navegador una pista de relación de aspecto (previniendo cambios de diseño), mientras que el CSS hace el video responsivo. Los navegadores modernos usan los valores de los atributos para calcular la relación de aspecto correcta incluso cuando CSS sobrescribe el tamaño real renderizado.