Validación HTML: Valor incorrecto "" para el atributo "(width|height)" en el elemento "iframe": La cadena vacía no es un entero no negativo válido.

Acerca de este problema HTML

La especificación HTML define que los atributos width y height en elementos <iframe> deben contener un entero no negativo válido — es decir, una cadena de uno o más dígitos que represente un número cero o mayor (por ejemplo, "0", "300", "600"). Cuando uno de estos atributos se establece como una cadena vacía (width="" o height=""), el validador genera este error porque una cadena vacía no puede ser procesada como un entero válido.

Esto ocurre comúnmente cuando un CMS, motor de plantillas o framework JavaScript genera un <iframe> con un valor de dimensión dinámico que termina estando en blanco. También puede suceder cuando los desarrolladores eliminan el valor pero dejan el atributo en su lugar, o al copiar y pegar código de inserción y accidentalmente borrar el valor.

Aunque la mayoría de los navegadores recurrirán a sus dimensiones predeterminadas de iframe (típicamente 300×150 píxeles) cuando encuentran un valor vacío, depender de este comportamiento no cumple con los estándares. Los valores de atributo inválidos pueden causar renderizado impredecible en diferentes navegadores, interferir con los cálculos de diseño y hacer que tu marcado sea más difícil de mantener. Las tecnologías de asistencia también pueden tener problemas para determinar las dimensiones previstas del iframe.

Cómo solucionarlo

Tienes varias opciones:

Establece un valor entero válido. Si conoces las dimensiones deseadas, especifícalas directamente como enteros no negativos. Los valores representan píxeles.
Elimina el atributo completamente. Si no necesitas establecer dimensiones mediante atributos HTML, elimina el atributo width o height vacío. El navegador aplicará su tamaño predeterminado, o puedes controlar el dimensionado con CSS.
Usa CSS en su lugar. Para diseños responsivos o dimensionado más flexible, elimina los atributos HTML y usa propiedades CSS como width, height, max-width o aspect-ratio.

Ten en cuenta que estos atributos aceptan solo enteros simples — sin unidades, sin porcentajes y sin puntos decimales. Por ejemplo, width="600" es válido, pero width="600px" o width="100%" no lo es.

Ejemplos

❌ Inválido: valores de cadena vacía

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

Tanto width como height están establecidos como cadenas vacías, que no son enteros no negativos válidos.

✅ Corregido: especifica valores enteros válidos

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

✅ Corregido: elimina los atributos vacíos

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

El navegador usará sus dimensiones predeterminadas (típicamente 300×150 píxeles).

✅ Corregido: elimina atributos y usa CSS para el dimensionado

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

Este enfoque es especialmente útil para diseños responsivos donde un ancho fijo en píxeles en HTML no tiene sentido.

✅ Corregido: iframe responsivo con relación de aspecto CSS

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

Usar aspect-ratio en CSS permite que el iframe se escale de forma responsiva mientras mantiene sus proporciones, sin necesidad de atributos width o height en absoluto.