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

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-auto-for-attribute-width-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 `width` attribute on `<video>` (and `<img>`, `<canvas>`, etc.) as a "valid non-negative integer," which means it must consist only of digits like `"640"` or `"1280"`. Values like `"auto"`, `"100%"`, or `"50vw"` are not permitted in the HTML attribute itself — these are CSS concepts, not valid HTML attribute values.

This matters for several reasons. First, browsers use the `width` and `height` HTML attributes to reserve the correct amount of space in the layout before the video loads, which prevents content layout shift (CLS). When the value is invalid, the browser may ignore it entirely, leading to layout jumps as the page loads. Second, invalid attributes can cause unpredictable rendering behavior across different browsers. Third, standards compliance ensures your markup is future-proof and works reliably with assistive technologies.

A common reason developers set `width="auto"` is to make the video responsive. The correct way to achieve this is through CSS rather than through the HTML attribute. You can still set `width` and `height` attributes with valid integers to define the video's intrinsic aspect ratio (which helps the browser reserve space), and then override the display size with CSS.

## How to Fix

1. **Replace `"auto"` with a valid integer** that represents the desired pixel width.
2. **If you need responsive sizing**, remove the `width` attribute or keep it for aspect ratio hinting, and use CSS to control the rendered size.

## Examples

### ❌ Invalid: Using `"auto"` as the width attribute

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

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

### ✅ Fixed: Specifying a valid pixel value

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

The `width` and `height` attributes use plain integers — no units, no keywords. The browser interprets these as pixels.

### ✅ Fixed: Responsive video using CSS

If you want the video to scale fluidly with its container, use CSS instead of the HTML attribute:

```html
<style>
  .responsive-video {
    width: 100%;
    height: auto;
  }
</style>

<video class="responsive-video" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
```

In CSS, `width: 100%` and `height: auto` are perfectly valid and will make the video scale to fill its container while maintaining its aspect ratio.

### ✅ Best practice: Combine HTML attributes with CSS

For the best of both worlds — layout stability and responsive sizing — provide `width` and `height` attributes for aspect ratio hinting, then override with CSS:

```html
<style>
  .responsive-video {
    max-width: 100%;
    height: auto;
  }
</style>

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

Here, the `width="640"` and `height="360"` attributes tell the browser the video's intrinsic 16:9 aspect ratio, so it can reserve the right amount of space before the video loads. The CSS `max-width: 100%` ensures the video never exceeds its container, and `height: auto` keeps the aspect ratio intact. This approach minimizes layout shift while remaining fully responsive.