HTML poster Attribute

HTML poster Attribute

The HTML poster attribute specifies an image that can be displayed in a <video> element before video data is available. A poster image gives users a visual preview of the video before playback begins.

Elements That Use the poster Attribute

The poster attribute is used with the <video> element.

poster Value

The value of the poster attribute is a valid, non-empty URL that identifies an image file.

<video controls poster="poster.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

The URL can be relative to the current document or an absolute URL that identifies an image resource.

How poster Works

When a <video> element has a valid poster attribute, the browser can display the specified image while no video data is available. The poster provides a visual representation of the video before playback.

If the poster attribute is absent or empty, there is no poster frame supplied by the attribute. Once video data becomes available, the browser can display a frame from the video instead.

<video controls width="640" height="360" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

Choosing a Poster Image

A poster image should provide a useful preview of the video. A representative frame from the video is often a good choice because it helps users understand what the video contains before they begin playback.

The poster should also be clear at the size at which the video is displayed. Avoid using an unrelated image that could give users a misleading impression of the video content.

Poster Image Dimensions

The poster image and video playback area can have different dimensions or aspect ratios. Browsers normally scale the poster image to fit within the video element while preserving the image's aspect ratio.

For the most consistent appearance, use a poster image with the same aspect ratio as the video. For example, a 640 × 360 poster image has the same 16:9 aspect ratio as a 1280 × 720 video.

<video controls width="640" height="360" poster="poster-640x360.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

Common Mistakes

Do not use an empty poster value when you want a poster image to appear. The attribute must identify a valid image resource.

Do not confuse the poster attribute with the video source. The poster attribute identifies an image, while src or nested <source> elements identify the video resource.

Do not assume the poster image will remain visible throughout playback. Its purpose is to represent the video while the browser is showing the poster frame rather than video content.

Avoid using a poster image with a very different aspect ratio from the video when a consistent presentation is important, because the image may not fill the playback area in the way you expect.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The poster attribute on the <video> element is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the poster Attribute

The example shows how the poster attribute provides an image for a <video> element before the video begins playing.

Summary

The HTML poster attribute specifies an image that can be displayed by a <video> element while no video data is available. Its value must be a valid, non-empty image URL, and a representative image with an aspect ratio matching the video generally provides the most consistent presentation.