Verificação HTML: Valor inválido X para o atributo "width" no elemento "iframe": 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 <iframe> como aceitando apenas inteiros não negativos válidos. Estes valores são interpretados como dimensões em pixels. Ao contrário de algumas práticas HTML mais antigas onde valores percentuais eram por vezes aceites pelos navegadores, o padrão atual não permite o carácter % nestes atributos. Quando o validador W3C encontra um valor como "100%", espera que cada carácter seja um dígito e sinaliza o % como inválido.

Isto é uma questão de conformidade com os padrões, mas também afeta a previsibilidade entre navegadores. Embora a maioria dos navegadores modernos ainda possa interpretar width="100%" num <iframe> como você esperaria, este comportamento não é padrão e não é garantido. Depender disto significa que o seu layout pode falhar em certos navegadores ou modos de renderização. Usar CSS para dimensionamento baseado em percentagens é a abordagem correta e confiável.

Como corrigir

Se precisar de uma largura fixa em pixels, simplesmente forneça o valor inteiro sem qualquer unidade:

<iframe src="page.html" width="600" height="400"></iframe>

Se precisar de uma largura baseada em percentagem (por exemplo, para tornar o iframe responsivo), remova o atributo width inteiramente e use CSS em vez disso. Pode aplicar estilos inline ou através de uma folha de estilos.

Abordagem de estilo inline:

<iframe src="page.html" style="width: 100%; height: 400px;"></iframe>

Abordagem de classe CSS:

<iframe src="page.html" class="responsive-iframe"></iframe>

.responsive-iframe {
  width: 100%;
  height: 400px;
}

Esta mesma regra aplica-se ao atributo height — valores como height="50%" são igualmente inválidos e devem ser tratados através de CSS.

Exemplos

❌ Inválido: Percentagem no atributo `width`

<iframe src="https://example.com" width="100%" height="300"></iframe>

Isto desencadeia o erro porque 100% não é um inteiro não negativo válido.

❌ Inválido: Percentagem em ambos os atributos `width` e `height`

<iframe src="https://example.com" width="100%" height="50%"></iframe>

Ambos os atributos contêm valores inválidos devido ao carácter %.

✅ Válido: Valores fixos em pixels usando atributos

<iframe src="https://example.com" width="800" height="300"></iframe>

Ambos os valores são inteiros não negativos válidos que representam pixels.

✅ Válido: Dimensionamento percentual usando CSS

<iframe src="https://example.com" style="width: 100%; height: 300px;"></iframe>

A percentagem é tratada por CSS, e não estão presentes atributos inválidos.

✅ Válido: Iframe responsivo com um wrapper

Para um iframe totalmente responsivo que mantém uma proporção de aspecto, um padrão comum usa um elemento wrapper:

<div style="position: relative; width: 100%; aspect-ratio: 16 / 9;">
  <iframe
    src="https://example.com"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
  </iframe>
</div>

Esta abordagem mantém o HTML válido enquanto lhe dá controlo total sobre o comportamento responsivo do iframe através de CSS.