Verificação HTML: Valor inválido "auto" para o atributo "width" no elemento "video": Era esperado um dígito mas foi encontrado "a" em vez disso.

Sobre este problema HTML

A especificação HTML define o atributo width em <video> (e <img>, <canvas>, etc.) como um “inteiro não negativo válido”, o que significa que deve consistir apenas em dígitos como "640" ou "1280". Valores como "auto", "100%", ou "50vw" não são permitidos no próprio atributo HTML — estes são conceitos CSS, não valores válidos de atributos HTML.

Isto é importante por várias razões. Primeiro, os navegadores usam os atributos HTML width e height para reservar a quantidade correta de espaço no layout antes do vídeo carregar, o que previne o deslocamento de layout do conteúdo (CLS). Quando o valor é inválido, o navegador pode ignorá-lo completamente, levando a saltos no layout enquanto a página carrega. Segundo, atributos inválidos podem causar comportamento de renderização imprevisível em diferentes navegadores. Terceiro, a conformidade com as normas garante que a sua marcação é à prova de futuro e funciona de forma fiável com tecnologias assistivas.

Uma razão comum para os programadores definirem width="auto" é para tornar o vídeo responsivo. A forma correta de conseguir isto é através de CSS em vez do atributo HTML. Você ainda pode definir atributos width e height com inteiros válidos para definir a proporção intrínseca do vídeo (o que ajuda o navegador a reservar espaço), e depois sobrescrever o tamanho de visualização com CSS.

Como corrigir

Substitua "auto" por um inteiro válido que represente a largura desejada em píxeis.
Se precisar de dimensionamento responsivo, remova o atributo width ou mantenha-o para indicação de proporção, e use CSS para controlar o tamanho renderizado.

Exemplos

❌ Inválido: Usar `"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>

Isto desencadeia o erro porque "auto" não é um inteiro não negativo.

✅ Corrigido: Especificar um valor de píxeis válido

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

Os atributos width e height usam inteiros simples — sem unidades, sem palavras-chave. O navegador interpreta estes como píxeis.

✅ Corrigido: Vídeo responsivo usando CSS

Se quiser que o vídeo dimensione de forma fluida com o seu contentor, use CSS em vez do 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>

Em CSS, width: 100% e height: auto são perfeitamente válidos e farão com que o vídeo dimensione para preencher o seu contentor mantendo a sua proporção.

✅ Melhor prática: Combinar atributos HTML com CSS

Para o melhor dos dois mundos — estabilidade de layout e dimensionamento responsivo — forneça atributos width e height para indicação de proporção, depois sobrescreva com 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>

Aqui, os atributos width="640" e height="360" informam o navegador sobre a proporção intrínseca 16:9 do vídeo, para que possa reservar a quantidade certa de espaço antes do vídeo carregar. O CSS max-width: 100% garante que o vídeo nunca excede o seu contentor, e height: auto mantém a proporção intacta. Esta abordagem minimiza o deslocamento de layout mantendo-se totalmente responsiva.