Bad value X for attribute “width” on element “embed”: Expected a digit but saw “%” instead.

The HTML specification defines the width and height attributes on <embed> as accepting only valid non-negative integers. This means bare numbers like 600 or 800 that represent dimensions in CSS pixels. When you write width="100%", the validator expects a digit character but encounters the % sign, which doesn’t conform to the expected format.

This matters for several reasons. Browsers may interpret invalid attribute values inconsistently — some might ignore the percentage and fall back to a default size, while others might attempt to parse the number portion and discard the %. This leads to unpredictable rendering across different browsers and devices. Following the specification ensures your embedded content displays at predictable dimensions everywhere.

The same rule applies to the height attribute. Neither width nor height on <embed> supports units of any kind — no px, %, em, or other suffixes. Just a plain integer.

How to Fix It

You have two main approaches:

1. Use integer pixel values directly. Replace width="100%" with a specific pixel value like width="800". This is the simplest fix when you know the desired dimensions.

2. Use CSS for responsive or percentage-based sizing. Remove the width and height attributes (or set them to reasonable defaults) and apply CSS through a class, style attribute, or external stylesheet. This is the better approach when you need the embed to be fluid or responsive.

Examples

Invalid — percentage in the width attribute

This triggers the validator error because 100% is not a valid non-negative integer:

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

Fixed — using pixel values in attributes

Replace the percentage with a plain integer:

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

Fixed — using CSS for percentage-based sizing

Remove the dimension attributes and use CSS to control the size:

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

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

Fixed — responsive embed with a wrapper container

For a fully responsive embed that maintains an aspect ratio, wrap it in a container and use 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%;
}

This approach gives you full control over sizing and responsiveness without relying on invalid HTML attributes. The aspect-ratio property ensures the container (and therefore the embed) maintains consistent proportions as it scales.

Learn more:

MDN Reference

<embed>: The Embed External Content element - MDN

→

MDN Reference

MDN: Content embedded in HTML

→

WHATWG Spec

WHATWG: Embedded content

→