Valor incorrecto “X%” para el atributo “height” en el elemento “video”: Se esperaba un dígito pero se encontró “%” en su lugar.

El atributo height en <video> está definido en la especificación HTML como un “entero no negativo válido.” Esto significa que debe ser una cadena de dígitos (por ejemplo, "480") sin unidades, sin puntos decimales y sin signos de porcentaje. Cuando escribes algo como height="50%", el validador W3C lo rechaza porque % no es un carácter de dígito y los valores porcentuales no forman parte de la sintaxis permitida del atributo.

Esta misma regla se aplica al atributo width en <video>, así como a los atributos width y height en <img>, <canvas> y otros elementos que aceptan dimensiones en píxeles. El entero que proporcionas representa un tamaño en píxeles CSS, por lo que height="480" significa 480 píxeles CSS — no se necesita ni se permite ningún sufijo de unidad.

Por qué esto importa

• Cumplimiento de estándares: El estándar HTML living define explícitamente estos atributos como enteros no negativos. Usar porcentajes viola la especificación y produce un error de validación.
• Comportamiento del navegador: Aunque algunos navegadores pueden intentar interpretar un valor porcentual, el comportamiento es indefinido e inconsistente. No puedes confiar en que funcione correctamente en todos los navegadores y versiones.
• Estabilidad del layout: Proporcionar valores enteros válidos de width y height ayuda a los navegadores a reservar la proporción de aspecto correcta para el video antes de que se cargue, reduciendo el cambio de layout acumulativo (CLS). Los valores inválidos socavan este beneficio.

Cómo solucionarlo

1. Reemplaza el valor porcentual con un entero simple que represente la altura deseada en píxeles.
2. Si necesitas dimensionado basado en porcentajes o responsivo, elimina el porcentaje del atributo HTML y usa CSS en su lugar. Las propiedades CSS width y height admiten completamente valores porcentuales, unidades de viewport y otros métodos de dimensionado flexible.
3. Mantén siempre los atributos enteros width y height en el elemento cuando sea posible, incluso si también usas CSS para dimensionado responsivo. Esto proporciona una pista de proporción de aspecto intrínseca al navegador.

Ejemplos

❌ Inválido: valor porcentual en el atributo height

<video controls width="100%" height="50%">
  <source src="/media/video.webm" type="video/webm">
</video>

El validador reporta: Valor incorrecto “50%” para el atributo “height” en el elemento “video”: Se esperaba un dígito pero se encontró “%” en su lugar. El mismo error se aplica al atributo width="100%".

✅ Corregido: valores enteros para dimensiones intrínsecas

<video controls width="640" height="480">
  <source src="/media/video.webm" type="video/webm">
</video>

Tanto width como height usan enteros simples que representan píxeles CSS. Esto es válido y le da al navegador una pista de proporción de aspecto (4:3 en este caso).

✅ Corregido: dimensionado responsivo con CSS

Si necesitas que el video se escale como un porcentaje de su contenedor, usa CSS para el dimensionado mientras mantienes atributos enteros válidos para la proporción de aspecto:

<video controls width="640" height="360" style="width: 100%; height: auto;">
  <source src="/media/video.webm" type="video/webm">
</video>

Aquí, width="640" y height="360" le dicen al navegador la proporción de aspecto intrínseca del video (16:9), mientras que el estilo en línea (o una hoja de estilos externa) hace que el video llene el 100% del ancho de su contenedor y escale su altura proporcionalmente. Este enfoque es tanto HTML válido como completamente responsivo.

✅ Corregido: usando una clase CSS para video responsivo

<style>
  .responsive-video {
    width: 100%;
    max-width: 800px;
    height: auto;
  }
</style>

<video controls width="800" height="450" class="responsive-video">
  <source src="/media/video.webm" type="video/webm">
</video>

Esto mantiene el HTML válido, proporciona una pista de proporción de aspecto y logra un dimensionado flexible basado en porcentajes completamente a través de CSS.

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Iniciar prueba gratuita Ver precios