Verificação HTML: Valor inválido X para o atributo "width" no elemento "embed": era esperado um dígito, mas foi encontrado "%" em vez disso.

Sobre este problema HTML

A especificação HTML define os atributos width e height em <embed> como aceitando apenas números inteiros válidos não-negativos. Isto significa números simples como 600 ou 800 que representam dimensões em píxeis CSS. Quando escreve width="100%", o validador espera um carácter dígito, mas encontra o sinal %, que não está conforme com o formato esperado.

Isto é importante por várias razões. Os navegadores podem interpretar valores de atributos inválidos de forma inconsistente — alguns podem ignorar a percentagem e voltar a um tamanho predefinido, enquanto outros podem tentar analisar a parte numérica e descartar o %. Isto leva a renderização imprevisível em diferentes navegadores e dispositivos. Seguir a especificação garante que o seu conteúdo incorporado é exibido com dimensões previsíveis em todos os locais.

A mesma regra aplica-se ao atributo height. Nem width nem height em <embed> suportam unidades de qualquer tipo — sem px, %, em, ou outros sufixos. Apenas um número inteiro simples.

Como corrigir

Tem duas abordagens principais:

Use valores de píxeis inteiros diretamente. Substitua width="100%" por um valor específico de píxeis como width="800". Esta é a correção mais simples quando conhece as dimensões desejadas.
Use CSS para dimensionamento responsivo ou baseado em percentagens. Remova os atributos width e height (ou defina-os para valores predefinidos razoáveis) e aplique CSS através de uma class, atributo style, ou folha de estilos externa. Esta é a melhor abordagem quando precisa que o embed seja fluido ou responsivo.

Exemplos

Inválido — percentagem no atributo `width`

Isto desencadeia o erro do validador porque 100% não é um número inteiro válido não-negativo:

<embed src="file.pdf" type="application/pdf" width="100%" height="600">

Corrigido — usando valores de píxeis nos atributos

Substitua a percentagem por um número inteiro simples:

<embed src="file.pdf" type="application/pdf" width="800" height="600">

Corrigido — usando CSS para dimensionamento baseado em percentagens

Remova os atributos de dimensão e use CSS para controlar o tamanho:

<embed src="file.pdf" type="application/pdf" class="embed-fluid">

.embed-fluid {
  width: 100%;
  height: 600px;
}

Corrigido — embed responsivo com um contentor wrapper

Para um embed totalmente responsivo que mantém uma proporção de aspeto, envolva-o num contentor e use CSS:

<div class="embed-wrapper">
  <embed src="file.pdf" type="application/pdf">
</div>

.embed-wrapper {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 4 / 3;
}

.embed-wrapper embed {
  width: 100%;
  height: 100%;
}

Esta abordagem dá-lhe controlo total sobre o dimensionamento e responsividade sem depender de atributos HTML inválidos. A propriedade aspect-ratio garante que o contentor (e portanto o embed) mantém proporções consistentes à medida que escala.