Valor inválido “X%” para o atributo “width” no elemento “video”: Esperado um dígito mas encontrado “%” em vez disso.

A especificação HTML define o atributo width em <video> como um “número inteiro não-negativo válido”, o que significa que deve consistir apenas em dígitos (ex., 640). Não pode incluir unidades como px, em, ou %. Quando escreve algo como width="100%", o validador espera um caráter dígito mas encontra o sinal %, produzindo este erro.

Este é um erro comum porque CSS permite valores percentuais para largura, e alguns elementos HTML mais antigos (como <table>) historicamente aceitavam valores percentuais nos seus atributos width. No entanto, o elemento <video> segue a especificação HTML moderna, que restringe width apenas a números inteiros de píxeis.

Porque isto é importante

• Conformidade com padrões: Os navegadores podem interpretar valores de atributos inválidos de forma imprevisível. Embora a maioria dos navegadores modernos possa ignorar o % e tentar analisar o número, este comportamento não é garantido.
• Intenção de design responsivo é perdida: Mesmo que um navegador tente lidar com width="100%", pode tratá-lo como width="100" (100 pixels CSS), que quase certamente não é o que você pretendia.
• Acessibilidade e consistência: Marcação válida garante que tecnologias assistivas e todos os navegadores renderizam o seu conteúdo conforme esperado.

Como corrigir

Se precisar de uma largura fixa em píxeis, defina o atributo width para um número inteiro simples. Se precisar de uma largura responsiva ou baseada em percentagem, remova o atributo width inteiramente e use CSS.

Exemplos

❌ Inválido: valor percentual no atributo width

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

✅ Corrigido: usando um número inteiro de píxeis para uma largura fixa

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

✅ Corrigido: usando CSS para uma largura baseada em percentagem

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

✅ Corrigido: usando uma folha de estilos externa para vídeo 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>

A abordagem CSS é geralmente preferida para layouts responsivos porque lhe dá muito mais controlo — você pode combinar width, max-width, e height: auto para criar um vídeo que escala proporcionalmente dentro do seu contentor. Os atributos HTML width e height são melhor utilizados quando quer especificar as dimensões intrínsecas do vídeo em píxeis, o que também ajuda o navegador a reservar a quantidade correta de espaço antes do vídeo carregar, reduzindo mudanças de layout.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Iniciar teste gratuito Ver preços