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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-width-on-element-iframe-expected-a-digit-but-saw-instead
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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:

```html
<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:**

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

**CSS class approach:**

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

```css
.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

```html
<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`

```html
<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

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

Both values are valid non-negative integers representing pixels.

### ✅ Valid: Percentage sizing using CSS

```html
<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:

```html
<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.