Valor inválido “X%” para o atributo “height” no elemento “video”: Esperava-se um dígito, mas foi encontrado “%” em vez disso.

O atributo height em <video> é definido na especificação HTML como um “número inteiro não-negativo válido”. Isto significa que deve ser uma sequência de dígitos (por exemplo, "480") sem unidades, sem pontos decimais e sem sinais de percentagem. Quando escreve algo como height="50%", o validador W3C rejeita-o porque % não é um carácter dígito e os valores percentuais não fazem parte da sintaxe permitida para o atributo.

Esta mesma regra aplica-se ao atributo width em <video>, bem como aos atributos width e height em <img>, <canvas> e outros elementos que aceitam dimensões em pixéis. O número inteiro que fornece representa um tamanho em pixéis CSS, portanto height="480" significa 480 pixéis CSS — não é necessário nem permitido um sufixo de unidade.

Por que isto é importante

• Conformidade com normas: A norma HTML living standard define explicitamente estes atributos como números inteiros não-negativos. Usar percentagens viola a especificação e produz um erro de validação.
• Comportamento do navegador: Embora alguns navegadores possam tentar interpretar um valor percentual, o comportamento não está definido e é inconsistente. Não pode confiar que funcione corretamente em todos os navegadores e versões.
• Estabilidade do layout: Fornecer valores inteiros válidos para width e height ajuda os navegadores a reservar a proporção correta para o vídeo antes de este carregar, reduzindo o cumulative layout shift (CLS). Valores inválidos prejudicam este benefício.

Como corrigir

1. Substitua o valor percentual por um número inteiro simples que represente a altura desejada em pixéis.
2. Se precisar de dimensionamento baseado em percentagens ou responsivo, remova a percentagem do atributo HTML e use CSS em vez disso. As propriedades CSS width e height suportam totalmente valores percentuais, unidades de viewport e outros métodos de dimensionamento flexível.
3. Mantenha sempre os atributos inteiros width e height no elemento quando possível, mesmo se também usar CSS para dimensionamento responsivo. Isto fornece uma dica de proporção intrínseca ao navegador.

Exemplos

❌ Inválido: valor percentual no atributo height

<video controls width="100%" height="50%">
  <source src="/media/video.webm" type="video/webm">
</video>

O validador reporta: Valor inválido “50%” para o atributo “height” no elemento “video”: Esperava-se um dígito, mas foi encontrado “%” em vez disso. O mesmo erro aplica-se ao atributo width="100%".

✅ Corrigido: valores inteiros para dimensões intrínsecas

<video controls width="640" height="480">
  <source src="/media/video.webm" type="video/webm">
</video>

Tanto width como height usam números inteiros simples que representam pixéis CSS. Isto é válido e dá ao navegador uma dica de proporção (4:3 neste caso).

✅ Corrigido: dimensionamento responsivo com CSS

Se precisar que o vídeo seja dimensionado como uma percentagem do seu contentor, use CSS para o dimensionamento mantendo atributos inteiros válidos para a proporção:

<video controls width="640" height="360" style="width: 100%; height: auto;">
  <source src="/media/video.webm" type="video/webm">
</video>

Aqui, width="640" e height="360" indicam ao navegador a proporção intrínseca do vídeo (16:9), enquanto o estilo inline (ou uma folha de estilo externa) faz com que o vídeo preencha 100% da largura do seu contentor e dimensione a altura proporcionalmente. Esta abordagem é tanto HTML válido como totalmente responsiva.

✅ Corrigido: usando uma classe CSS para vídeo responsivo

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

<video controls width="800" height="450" class="responsive-video">
  <source src="/media/video.webm" type="video/webm">
</video>

Isto mantém o HTML válido, fornece uma dica de proporção e consegue dimensionamento flexível baseado em percentagens inteiramente através de CSS.

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