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

The HTML specification defines the width and height attributes on <iframe> as accepting only valid non-negative integers. These values are interpreted as pixel dimensions. Unlike some older HTML practices where percentage values were sometimes accepted by browsers, the current standard does not permit the % character in these attributes. When the W3C validator encounters a value like "100%", it expects every character to be a digit and flags the % as invalid.

This is a standards compliance issue, but it also affects predictability across browsers. While most modern browsers may still interpret width="100%" on an <iframe> as you’d expect, this behavior is non-standard and not guaranteed. Relying on it means your layout could break in certain browsers or rendering modes. Using CSS for percentage-based sizing is the correct, reliable approach.

How to Fix It

If you need a fixed pixel width, simply provide the integer value without any unit:

<iframe src="page.html" width="600" height="400"></iframe>

If you need a percentage-based width (e.g., to make the iframe responsive), remove the width attribute entirely and use CSS instead. You can apply styles inline or through a stylesheet.

Inline style approach:

<iframe src="page.html" style="width: 100%; height: 400px;"></iframe>

CSS class approach:

<iframe src="page.html" class="responsive-iframe"></iframe>

.responsive-iframe {
  width: 100%;
  height: 400px;
}

This same rule applies to the height attribute — values like height="50%" are equally invalid and should be handled through CSS.

Examples

❌ Invalid: Percentage in width attribute

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

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

❌ Invalid: Percentage in both width and height

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

Both attributes contain invalid values due to the % character.

✅ Valid: Fixed pixel values using attributes

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

Both values are valid non-negative integers representing pixels.

✅ Valid: Percentage sizing using CSS

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

The percentage is handled by CSS, and no invalid attributes are present.

✅ Valid: Responsive iframe with a wrapper

For a fully responsive iframe that maintains an aspect ratio, a common pattern uses a wrapper element:

<div style="position: relative; width: 100%; aspect-ratio: 16 / 9;">
  <iframe
    src="https://example.com"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
  </iframe>
</div>

This approach keeps the HTML valid while giving you full control over the iframe’s responsive behavior through CSS.

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing