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

Acerca de este problema HTML

La especificación HTML define los atributos width y height en <embed> como que solo aceptan enteros no negativos válidos. Esto significa números simples como 600 o 800 que representan dimensiones en píxeles CSS. Cuando escribes width="100%", el validador espera un carácter de dígito pero encuentra el signo %, que no se ajusta al formato esperado.

Esto es importante por varias razones. Los navegadores pueden interpretar valores de atributo inválidos de manera inconsistente — algunos podrían ignorar el porcentaje y usar un tamaño por defecto, mientras que otros podrían intentar analizar la parte numérica y descartar el %. Esto lleva a un renderizado impredecible en diferentes navegadores y dispositivos. Seguir la especificación asegura que tu contenido incrustado se muestre con dimensiones predecibles en todas partes.

La misma regla se aplica al atributo height. Ni width ni height en <embed> soportan unidades de ningún tipo — no px, %, em, ni otros sufijos. Solo un entero simple.

Cómo solucionarlo

Tienes dos enfoques principales:

Usar valores de píxeles enteros directamente. Reemplaza width="100%" con un valor específico de píxeles como width="800". Esta es la solución más simple cuando conoces las dimensiones deseadas.
Usar CSS para dimensionado responsivo o basado en porcentajes. Elimina los atributos width y height (o configúralos con valores por defecto razonables) y aplica CSS a través de una class, atributo style, o hoja de estilos externa. Este es el mejor enfoque cuando necesitas que el embed sea fluido o responsivo.

Ejemplos

Inválido — porcentaje en el atributo `width`

Esto activa el error del validador porque 100% no es un entero no negativo válido:

<embed src="file.pdf" type="application/pdf" width="100%" height="600">

Corregido — usando valores de píxeles en atributos

Reemplaza el porcentaje con un entero simple:

<embed src="file.pdf" type="application/pdf" width="800" height="600">

Corregido — usando CSS para dimensionado basado en porcentajes

Elimina los atributos de dimensión y usa CSS para controlar el tamaño:

<embed src="file.pdf" type="application/pdf" class="embed-fluid">

.embed-fluid {
  width: 100%;
  height: 600px;
}

Corregido — embed responsivo con un contenedor envolvente

Para un embed completamente responsivo que mantenga una relación de aspecto, envuélvelo en un contenedor y usa CSS:

<div class="embed-wrapper">
  <embed src="file.pdf" type="application/pdf">
</div>

.embed-wrapper {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 4 / 3;
}

.embed-wrapper embed {
  width: 100%;
  height: 100%;
}

Este enfoque te da control total sobre el dimensionado y la capacidad de respuesta sin depender de atributos HTML inválidos. La propiedad aspect-ratio asegura que el contenedor (y por lo tanto el embed) mantenga proporciones consistentes mientras se escala.