# Bad value “” for attribute “poster” on element “video”: Must be non-empty.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-poster-on-element-video-must-be-non-empty
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `poster` attribute tells the browser which image to display as a preview frame before the user plays the video. According to the WHATWG HTML Living Standard, the `poster` attribute's value must be a valid non-empty URL potentially surrounded by spaces. When you include `poster=""`, the attribute is present but its value is an empty string, which is not a valid URL — triggering the W3C validator error: **Bad value "" for attribute "poster" on element "video": Must be non-empty.**

This issue commonly occurs in a few scenarios:

- **Template or CMS output** where the poster URL is dynamically generated but the variable resolves to an empty string (e.g., `poster="<?= $posterUrl ?>"` when `$posterUrl` is empty).
- **JavaScript frameworks** that bind a value to the `poster` attribute, but the bound variable is `null`, `undefined`, or an empty string.
- **Manual editing** where a developer adds the attribute as a placeholder intending to fill it in later.

## Why This Matters

While most browsers will gracefully handle an empty `poster` attribute by simply not displaying a poster image, there are good reasons to fix this:

- **Standards compliance**: An empty `poster` value violates the HTML specification. Valid markup ensures predictable behavior across all browsers and devices.
- **Unnecessary network requests**: Some browsers may attempt to resolve the empty string as a relative URL, potentially triggering a failed HTTP request to the current page's URL. This wastes bandwidth and clutters developer tools and server logs with spurious errors.
- **Accessibility**: Screen readers and assistive technologies may interpret the empty attribute inconsistently, leading to confusing announcements for users.

## How to Fix It

You have two straightforward options:

1. **Provide a valid image URL** — If you want a poster frame, set the value to a real image path.
2. **Remove the attribute entirely** — If you don't need a poster image, simply omit `poster`. The browser will either show nothing or display the first frame of the video once enough data has loaded, depending on the `preload` attribute setting.

If the empty value comes from dynamic code, add a conditional check so the `poster` attribute is only rendered when a URL is actually available.

## Examples

### ❌ Invalid: Empty `poster` attribute

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

This triggers the validation error because `poster` is present but has no value.

### ✅ Fixed: Poster attribute with a valid URL

```html
<video controls poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
```

The `poster` attribute now points to a valid image file that the browser will display before playback begins.

### ✅ Fixed: Poster attribute removed entirely

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

When no poster image is needed, omitting the attribute is the cleanest solution.

### ✅ Fixed: Conditional rendering in a template

If you're using a templating language or framework, conditionally include the attribute only when a value exists. Here's a conceptual example using a server-side template:

```html
<!-- Pseudo-template syntax: only render poster when posterUrl is not empty -->
<video controls {{#if posterUrl}}poster="{{posterUrl}}"{{/if}}>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
```

This pattern prevents the empty `poster=""` from ever reaching the rendered HTML, keeping your output valid regardless of whether a poster URL is available.