HTML Guides for poster

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.

The poster attribute specifies an image to display as a placeholder while the video is loading or before the user starts playback. Like all HTML attributes that accept URLs — such as src, href, and action — the value must conform to valid URI syntax as defined by RFC 3986. In this standard, a literal space character is not a legal character in any part of a URL. When the validator encounters a space in the poster attribute’s value, it flags it as an illegal character in the path segment.

While most modern browsers are forgiving and will attempt to resolve URLs containing raw spaces by internally encoding them, relying on this behavior is problematic for several reasons:

• Standards compliance: The HTML specification requires valid URLs. Raw spaces violate this requirement.
• Interoperability: Not all user agents, HTTP clients, or content delivery systems handle unencoded spaces the same way. Some may truncate the URL at the first space or fail to resolve the resource entirely.
• Portability: If your HTML is consumed by tools, scrapers, or APIs that strictly parse URLs, unencoded spaces can cause silent failures.
• Consistency: Keeping URLs properly encoded prevents subtle bugs when paths are constructed dynamically in server-side or client-side code.

The fix is straightforward. You have two options:

1. Percent-encode the spaces: Replace every space in the URL with %20. This preserves the original file and folder names on the server while producing a valid URL in your HTML.
2. Eliminate spaces from file and folder names: Use hyphens (-), underscores (_), or camelCase instead of spaces. This is generally considered best practice for web assets, as it avoids encoding issues across the board.

Note that this rule applies to the entire URL path, not just the filename. If any directory in the path contains a space, it must also be encoded or renamed. The same principle applies to other special characters that are reserved or disallowed in URLs, such as {, }, |, ^, and [.

Examples

Incorrect — space in the path

The folder name video images contains a space, which is illegal in a URL path segment.

<video controls poster="/img/video images/snapshot.png">
  <source src="/videos/sample.mp4" type="video/mp4">
</video>

Incorrect — space in the filename

The filename my poster.jpg also triggers the same error.

<video controls poster="/img/my poster.jpg">
  <source src="/videos/sample.mp4" type="video/mp4">
</video>

Fixed — percent-encoding the spaces

Each space is replaced with %20, producing a valid URL.

<video controls poster="/img/video%20images/snapshot.png">
  <source src="/videos/sample.mp4" type="video/mp4">
</video>

Fixed — removing spaces from the path

Renaming the folder to use a hyphen eliminates the need for encoding entirely.

<video controls poster="/img/video-images/snapshot.png">
  <source src="/videos/sample.mp4" type="video/mp4">
</video>

Fixed — removing spaces from the filename

<video controls poster="/img/my-poster.jpg">
  <source src="/videos/sample.mp4" type="video/mp4">
</video>

As a general best practice, avoid spaces in all file and folder names used on the web. Use hyphens or underscores instead. If you’re working with files you can’t rename — such as assets from a CMS or third-party system — always percent-encode spaces as %20 in your HTML. This applies not only to poster but to every attribute that takes a URL value, including src, href, action, data, and formaction.