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

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

<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

<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

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

<!-- 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.

Learn more:

MDN Reference

MDN Web Docs: <video>: The Video Embed element

→

WHATWG Spec

The video element — HTML Living Standard

→

MDN Reference

Video and audio content

→