# Bad value “auto” for attribute “height” on element “video”: Expected a digit but saw “a” instead.

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

The HTML specification defines the `height` attribute on media elements like `<video>` as accepting only a valid non-negative integer. This means the attribute value must consist solely of digits (e.g., `"360"`), with no units, keywords, or other characters. When you write `height="auto"`, the validator expects to find a digit as the first character but encounters the letter `"a"`, which produces the error.

The value `"auto"` is a valid concept in CSS, where `height: auto` tells the browser to calculate the element's height automatically based on its intrinsic aspect ratio or content. However, HTML attributes and CSS properties follow different rules. The `height` HTML attribute is a simple pixel dimension hint — it doesn't understand CSS keywords. Mixing CSS values into HTML attributes is a common mistake, and while browsers may silently ignore the invalid value, it leads to unpredictable behavior: the video may render without any height hint, potentially causing layout shifts as the browser discovers the video's actual dimensions during loading.

Providing a valid `height` attribute matters for layout stability. When the browser knows the video's dimensions before the media loads, it can reserve the correct amount of space in the page layout, preventing content from jumping around. This improves the user experience and contributes to better Core Web Vitals scores (specifically Cumulative Layout Shift). It also ensures your HTML is standards-compliant and accessible to assistive technologies that may rely on well-formed markup.

## How to Fix

You have two approaches:

1. **Use a numeric value** — Replace `"auto"` with an integer that represents the video's height in pixels.
2. **Use CSS instead** — Remove the `height` attribute from the HTML and apply `height: auto` (or any other value) via CSS. This is ideal when you want the video to scale responsively.

If you want the video to maintain its aspect ratio while scaling, the CSS approach is generally preferred for responsive designs. You can combine a `width` attribute (or CSS `width`) with CSS `height: auto` to let the browser calculate the correct height from the video's intrinsic aspect ratio.

## Examples

### ❌ Invalid: Using "auto" in the HTML attribute

```html
<video width="640" height="auto" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
```

This triggers the validation error because `"auto"` is not a non-negative integer.

### ✅ Fixed: Using a numeric height value

```html
<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
```

The `height` attribute is now a valid integer. The browser reserves a 640×360 pixel area for the video before it loads.

### ✅ Fixed: Using CSS for responsive sizing

```html
<video width="640" controls style="height: auto; max-width: 100%;">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
```

Here the `height` HTML attribute is removed entirely. CSS `height: auto` ensures the video scales proportionally, and `max-width: 100%` prevents it from overflowing its container. This is a common pattern for responsive video.

### ✅ Fixed: Using both attributes with CSS override

```html
<video width="640" height="360" controls style="width: 100%; height: auto;">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
```

This approach provides the best of both worlds: the `width` and `height` HTML attributes give the browser an aspect ratio hint (preventing layout shifts), while the CSS makes the video responsive. Modern browsers use the attribute values to calculate the correct aspect ratio even when CSS overrides the actual rendered size.