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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-height-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 `height` attribute on `<iframe>` is defined in the HTML specification as a "valid non-negative integer." This means the value must be a string of one or more digit characters (`0` through `9`) and nothing else. Unlike CSS properties, this attribute does not accept units like `px` or `%`, nor does it accept decimal values like `315.5`. Even invisible characters such as leading or trailing spaces will trigger this validation error because the parser expects a digit and encounters something else.

This matters for several reasons. While browsers are generally forgiving and may still render the iframe correctly despite an invalid value, relying on error recovery behavior is fragile and may not work consistently across all browsers or future versions. Invalid attribute values can also cause unexpected results in automated tools, screen readers, and other user agents that parse HTML strictly. Writing valid, standards-compliant markup ensures predictable behavior everywhere.

Common causes of this error include:

- **Adding CSS units** to the attribute value (e.g., `height="315px"`)
- **Using percentages** (e.g., `height="100%"`)
- **Decimal values** (e.g., `height="315.5"`)
- **Whitespace** before or after the number (e.g., `height=" 315"` or `height="315 "`)
- **Copy-paste artifacts** introducing hidden characters

If you need percentage-based or decimal sizing, use CSS instead of the HTML attribute. The `height` attribute only accepts whole pixel values.

## Examples

### ❌ Invalid: Using `px` unit in the attribute

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

The validator sees the `p` character after `315` and reports the error.

### ❌ Invalid: Using a percentage

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

Percentage values are not allowed in the `height` attribute.

### ❌ Invalid: Decimal value

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

The decimal point is not a digit, so the validator rejects it.

### ❌ Invalid: Leading or trailing whitespace

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

The space before `315` is encountered where a digit is expected.

### ✅ Valid: Digits only

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

The value `315` contains only digits and is a valid non-negative integer.

### ✅ Valid: Using CSS for percentage-based sizing

If you need the iframe to scale responsively, remove the `height` attribute and use CSS instead:

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

Or better yet, apply styles through a stylesheet:

```html
<style>
  .responsive-iframe {
    width: 100%;
    height: 400px;
  }
</style>
<iframe class="responsive-iframe" src="https://example.com/video"></iframe>
```

This keeps the HTML attributes valid while giving you full control over sizing through CSS, including support for units like `%`, `vh`, `em`, and `calc()`.