Verificação HTML: Valor inválido "" para o atributo "(width|height)" no elemento "iframe": A string vazia não é um número inteiro não-negativo válido.

Sobre este problema HTML

A especificação HTML define que os atributos width e height em elementos <iframe> devem conter um número inteiro não-negativo válido — ou seja, uma string de um ou mais dígitos que representem um número zero ou maior (por exemplo, "0", "300", "600"). Quando um destes atributos é definido como uma string vazia (width="" ou height=""), o validador gera este erro porque uma string vazia não pode ser interpretada como um número inteiro válido.

Isto acontece frequentemente quando um CMS, motor de templates ou framework JavaScript produz um <iframe> com um valor de dimensão dinâmico que acaba por ficar em branco. Também pode ocorrer quando os programadores removem o valor mas deixam o atributo no lugar, ou quando copiam código de incorporação e acidentalmente apagam o valor.

Embora a maioria dos navegadores recorra às suas dimensões predefinidas de iframe (tipicamente 300×150 pixeis) quando encontram um valor vazio, confiar neste comportamento não está em conformidade com os padrões. Valores de atributo inválidos podem causar renderização imprevisível em diferentes navegadores, interferir com cálculos de layout e tornar a sua marcação mais difícil de manter. As tecnologias assistivas também podem ter dificuldades em determinar as dimensões pretendidas do iframe.

Como corrigir

Tem algumas opções:

Definir um valor inteiro válido. Se conhece as dimensões desejadas, especifique-as diretamente como números inteiros não-negativos. Os valores representam pixeis.
Remover completamente o atributo. Se não precisa de definir dimensões através de atributos HTML, remova o atributo width ou height vazio. O navegador aplicará o seu tamanho predefinido, ou pode controlar o dimensionamento com CSS.
Usar CSS em vez disso. Para designs responsivos ou dimensionamento mais flexível, remova os atributos HTML e use propriedades CSS como width, height, max-width ou aspect-ratio.

Note que estes atributos aceitam apenas números inteiros simples — sem unidades, sem percentagens e sem casas decimais. Por exemplo, width="600" é válido, mas width="600px" ou width="100%" não é.

Exemplos

❌ Inválido: valores de string vazia

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

Tanto width como height estão definidos como strings vazias, que não são números inteiros não-negativos válidos.

✅ Corrigido: especificar valores inteiros válidos

<iframe src="https://example.com" width="600" height="400"></iframe>

✅ Corrigido: remover os atributos vazios

<iframe src="https://example.com"></iframe>

O navegador usará as suas dimensões predefinidas (tipicamente 300×150 pixeis).

✅ Corrigido: remover atributos e usar CSS para dimensionamento

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

Esta abordagem é especialmente útil para layouts responsivos onde uma largura fixa em pixeis no HTML não faz sentido.

✅ Corrigido: iframe responsivo com rácio de aspeto CSS

<iframe
  src="https://example.com/video"
  style="width: 100%; aspect-ratio: 16 / 9; border: none;">
</iframe>

Usar aspect-ratio em CSS permite que o iframe escale de forma responsiva mantendo as suas proporções, sem necessidade de atributos width ou height.