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

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

<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

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

Percentage values are not allowed in the height attribute.

❌ Invalid: Decimal value

<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

<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

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

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

Or better yet, apply styles through a stylesheet:

<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().

Learn more:

MDN Reference

MDN Web Docs: The iframe element

→

WHATWG Spec

WHATWG HTML Standard: The iframe element

→

W3C Reference

W3C HTML5.2: The iframe Element

→

MDN Reference

MDN Web Docs: Global attributes

→