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

Acerca de este problema HTML

El atributo height en <iframe> está definido en la especificación HTML como un “número entero no negativo válido”. Esto significa que el valor debe ser una cadena de uno o más caracteres dígito (0 a 9) y nada más. A diferencia de las propiedades CSS, este atributo no acepta unidades como px o %, ni tampoco acepta valores decimales como 315.5. Incluso caracteres invisibles como espacios al principio o al final activarán este error de validación porque el analizador espera un dígito y encuentra algo distinto.

Esto es importante por varias razones. Aunque los navegadores generalmente son permisivos y pueden renderizar el iframe correctamente a pesar de un valor inválido, depender del comportamiento de recuperación de errores es frágil y puede no funcionar de manera consistente en todos los navegadores o versiones futuras. Los valores de atributo inválidos también pueden causar resultados inesperados en herramientas automatizadas, lectores de pantalla y otros agentes de usuario que analizan HTML de manera estricta. Escribir código válido y conforme a los estándares asegura un comportamiento predecible en todas partes.

Las causas comunes de este error incluyen:

Agregar unidades CSS al valor del atributo (ej., height="315px")
Usar porcentajes (ej., height="100%")
Valores decimales (ej., height="315.5")
Espacios en blanco antes o después del número (ej., height=" 315" o height="315 ")
Artefactos de copiar y pegar que introducen caracteres ocultos

Si necesitas dimensionamiento basado en porcentajes o decimal, usa CSS en lugar del atributo HTML. El atributo height solo acepta valores enteros de píxeles.

Ejemplos

❌ Inválido: usar unidad `px` en el atributo

<iframe width="560" height="315px" src="https://example.com/video"></iframe>

El validador ve el carácter p después de 315 e informa el error.

❌ Inválido: usar un porcentaje

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

Los valores de porcentaje no están permitidos en el atributo height.

❌ Inválido: valor decimal

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

El punto decimal no es un dígito, por lo que el validador lo rechaza.

❌ Inválido: espacios en blanco al principio o al final

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

El espacio antes de 315 se encuentra donde se esperaba un dígito.

✅ Válido: solo dígitos

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

El valor 315 contiene únicamente dígitos y es un número entero no negativo válido.

✅ Válido: usar CSS para dimensionamiento basado en porcentajes

Si necesitas que el iframe se escale de forma responsiva, quita el atributo height y usa CSS en su lugar:

<iframe
  width="560"
  height="315"
  src="https://example.com/video"
  style="width: 100%; height: 100%;"
></iframe>

O mejor aún, aplica los estilos a través de una hoja de estilos:

<style>
  .responsive-iframe {
    width: 100%;
    height: 400px;
  }
</style>
<iframe class="responsive-iframe" src="https://example.com/video"></iframe>

Esto mantiene los atributos HTML válidos mientras te da control total sobre el dimensionamiento a través de CSS, incluyendo soporte para unidades como %, vh, em y calc().