# Bad value “” for attribute “(width|height)” on element “iframe”: The empty string is not a valid non-negative integer.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-width-height-on-element-iframe-the-empty-string-is-not-a-valid-non-negative-integer
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML specification defines that the `width` and `height` attributes on `<iframe>` elements must contain a valid non-negative integer — that is, a string of one or more digits representing a number zero or greater (e.g., `"0"`, `"300"`, `"600"`). When one of these attributes is set to an empty string (`width=""` or `height=""`), the validator raises this error because an empty string cannot be parsed as a valid integer.

This commonly happens when a CMS, template engine, or JavaScript framework outputs an `<iframe>` with a dynamic dimension value that ends up being blank. It can also occur when developers remove the value but leave the attribute in place, or when copy-pasting embed code and accidentally clearing the value.

While most browsers will fall back to their default iframe dimensions (typically 300×150 pixels) when they encounter an empty value, relying on this behavior is not standards-compliant. Invalid attribute values can cause unpredictable rendering across different browsers, interfere with layout calculations, and make your markup harder to maintain. Assistive technologies may also have trouble determining the intended dimensions of the iframe.

### How to fix it

You have a few options:

1. **Set a valid integer value.** If you know the desired dimensions, specify them directly as non-negative integers. The values represent pixels.
2. **Remove the attribute entirely.** If you don't need to set dimensions via HTML attributes, remove the empty `width` or `height` attribute. The browser will apply its default size, or you can control sizing with CSS.
3. **Use CSS instead.** For responsive designs or more flexible sizing, remove the HTML attributes and use CSS properties like `width`, `height`, `max-width`, or `aspect-ratio`.

Note that these attributes accept only plain integers — no units, no percentages, and no decimal points. For example, `width="600"` is valid, but `width="600px"` or `width="100%"` is not.

## Examples

### ❌ Invalid: empty string values

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

Both `width` and `height` are set to empty strings, which are not valid non-negative integers.

### ✅ Fixed: specify valid integer values

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

### ✅ Fixed: remove the empty attributes

```html
<iframe src="https://example.com"></iframe>
```

The browser will use its default dimensions (typically 300×150 pixels).

### ✅ Fixed: remove attributes and use CSS for sizing

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

This approach is especially useful for responsive layouts where a fixed pixel width in HTML doesn't make sense.

### ✅ Fixed: responsive iframe with CSS aspect ratio

```html
<iframe
  src="https://example.com/video"
  style="width: 100%; aspect-ratio: 16 / 9; border: none;">
</iframe>
```

Using `aspect-ratio` in CSS lets the iframe scale responsively while maintaining its proportions, without needing `width` or `height` attributes at all.