Validación HTML: Valor X incorrecto para el atributo "width" en el elemento "iframe": Se esperaba un dígito pero se encontró "%" en su lugar.

Acerca de este problema HTML

La especificación HTML define que los atributos width y height en <iframe> aceptan únicamente números enteros válidos no negativos. Estos valores se interpretan como dimensiones en píxeles. A diferencia de algunas prácticas HTML más antiguas donde los valores en porcentaje a veces eran aceptados por los navegadores, el estándar actual no permite el carácter % en estos atributos. Cuando el validador W3C encuentra un valor como "100%", espera que cada carácter sea un dígito y marca el % como inválido.

Este es un problema de cumplimiento de estándares, pero también afecta la predictibilidad entre navegadores. Aunque la mayoría de los navegadores modernos pueden interpretar width="100%" en un <iframe> como esperarías, este comportamiento no es estándar y no está garantizado. Depender de él significa que tu diseño podría fallar en ciertos navegadores o modos de renderizado. Usar CSS para el dimensionado basado en porcentajes es el enfoque correcto y confiable.

Cómo solucionarlo

Si necesitas un ancho fijo en píxeles, simplemente proporciona el valor entero sin ninguna unidad:

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

Si necesitas un ancho basado en porcentaje (ej., para hacer el iframe responsivo), elimina completamente el atributo width y usa CSS en su lugar. Puedes aplicar estilos inline o a través de una hoja de estilos.

Enfoque con estilo inline:

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

Enfoque con clase CSS:

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

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

Esta misma regla aplica al atributo height — valores como height="50%" son igualmente inválidos y deben manejarse a través de CSS.

Ejemplos

❌ Inválido: Porcentaje en el atributo `width`

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

Esto genera el error porque 100% no es un número entero válido no negativo.

❌ Inválido: Porcentaje en ambos atributos `width` y `height`

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

Ambos atributos contienen valores inválidos debido al carácter %.

✅ Válido: Valores fijos en píxeles usando atributos

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

Ambos valores son números enteros válidos no negativos que representan píxeles.

✅ Válido: Dimensionado con porcentaje usando CSS

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

El porcentaje se maneja por CSS, y no hay atributos inválidos presentes.

✅ Válido: Iframe responsivo con un contenedor

Para un iframe completamente responsivo que mantenga una relación de aspecto, un patrón común usa un elemento contenedor:

<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>

Este enfoque mantiene el HTML válido mientras te da control total sobre el comportamiento responsivo del iframe a través de CSS.