Verificação HTML: Valor inválido "auto" para o atributo "height" no elemento "video": Esperado um dígito mas encontrado "a".

Sobre este problema HTML

A especificação HTML define o atributo height em elementos de média como <video> como aceitando apenas um número inteiro não negativo válido. Isto significa que o valor do atributo deve consistir apenas em dígitos (por exemplo, "360"), sem unidades, palavras-chave ou outros caracteres. Quando escreve height="auto", o validador espera encontrar um dígito como primeiro carácter mas encontra a letra "a", o que produz o erro.

O valor "auto" é um conceito válido em CSS, onde height: auto diz ao navegador para calcular automaticamente a altura do elemento com base na sua proporção intrínseca ou conteúdo. No entanto, os atributos HTML e as propriedades CSS seguem regras diferentes. O atributo HTML height é uma simples sugestão de dimensão em píxeis — não compreende palavras-chave CSS. Misturar valores CSS em atributos HTML é um erro comum, e embora os navegadores possam silenciosamente ignorar o valor inválido, isso leva a comportamentos imprevisíveis: o vídeo pode renderizar sem qualquer sugestão de altura, potencialmente causando mudanças no layout à medida que o navegador descobre as dimensões reais do vídeo durante o carregamento.

Fornecer um atributo height válido é importante para a estabilidade do layout. Quando o navegador conhece as dimensões do vídeo antes do média carregar, pode reservar a quantidade correta de espaço no layout da página, impedindo que o conteúdo salte. Isto melhora a experiência do utilizador e contribui para melhores pontuações de Core Web Vitals (especificamente Cumulative Layout Shift). Também garante que o seu HTML está em conformidade com os padrões e acessível a tecnologias assistivas que podem depender de marcação bem formada.

Como corrigir

Tem duas abordagens:

Use um valor numérico — Substitua "auto" por um número inteiro que representa a altura do vídeo em píxeis.
Use CSS em vez disso — Remova o atributo height do HTML e aplique height: auto (ou qualquer outro valor) via CSS. Isto é ideal quando quer que o vídeo escale de forma responsiva.

Se quer que o vídeo mantenha a sua proporção enquanto escala, a abordagem CSS é geralmente preferida para designs responsivos. Pode combinar um atributo width (ou CSS width) com CSS height: auto para deixar o navegador calcular a altura correta a partir da proporção intrínseca do vídeo.

Exemplos

❌ Inválido: Usar “auto” no atributo HTML

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

Isto provoca o erro de validação porque "auto" não é um número inteiro não negativo.

✅ Corrigido: Usar um valor numérico para altura

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

O atributo height é agora um número inteiro válido. O navegador reserva uma área de 640×360 píxeis para o vídeo antes de carregar.

✅ Corrigido: Usar CSS para dimensionamento 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>

Aqui o atributo HTML height é removido completamente. O CSS height: auto garante que o vídeo escala proporcionalmente, e max-width: 100% impede que transborde do seu contentor. Este é um padrão comum para vídeo responsivo.

✅ Corrigido: Usar ambos os atributos com substituição 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>

Esta abordagem fornece o melhor dos dois mundos: os atributos HTML width e height dão ao navegador uma sugestão de proporção (impedindo mudanças no layout), enquanto o CSS torna o vídeo responsivo. Os navegadores modernos usam os valores dos atributos para calcular a proporção correta mesmo quando o CSS substitui o tamanho renderizado real.