poster

Overview

The poster attribute specifies an image to display in the video player before the user starts playback. Without a poster, the browser shows either a blank rectangle or attempts to display the first frame of the video, which may be a black screen or a loading artifact.

A well-chosen poster image communicates the video's content, encourages users to play, and prevents visual jank during page load.

Applies to: <video>

Values

Bandwidth Savings

Pair poster with preload="none" for maximum bandwidth savings. The browser loads only the poster image and does not download any video data until the user clicks play. This is ideal for pages with multiple videos or hero sections where the video is decorative.

Without a poster, preload="none" shows a completely blank video element, which gives users no indication that a video exists.

Preventing Layout Shift

Always set explicit width and height attributes on the <video> element alongside the poster. This lets the browser reserve the correct space before the poster image loads, preventing Cumulative Layout Shift (CLS).

Aspect Ratio Match

The poster image should match the video's aspect ratio. If the poster has a different aspect ratio, the browser letterboxes or pillarboxes it within the video element, which can look awkward and misrepresent the content.

Multiple Sources

When using <source> elements for format fallback, the poster attribute goes on the <video> element itself, not on the individual sources.

Poster Image Tips

• Use a representative frame that accurately reflects the video content. Avoid generic thumbnails.
• Optimize the poster image with WebP or AVIF format and appropriate compression. A 200KB poster defeats the purpose of preload="none".
• Add a play button overlay in the poster image if the native controls do not make it obvious the element is a video.
• Generate posters at the video's intrinsic resolution. The browser scales the image to fill the video element.

Accessibility

• The poster image is purely visual. It has no alt attribute mechanism. Ensure the surrounding content (heading, caption, or aria-label) describes the video for screen reader users.
• Do not embed critical text information solely in the poster image. If the poster contains a title or call-to-action, provide that text in HTML as well.
• The poster is replaced once playback begins, so it does not need to remain accessible during playback.

Limitations

• There is no srcset equivalent for poster images. The browser loads a single poster URL regardless of screen size or pixel density.
• On some mobile browsers, the poster may not display if autoplay is set, since the video begins playing immediately.
• If the poster URL fails to load, the browser falls back to showing the first video frame (or a blank area if preload="none").
• The poster is not displayed after the video has played and been paused. Once playback starts, the current frame is shown instead.
• Safari on iOS may show its own play button overlay on top of the poster, which can conflict with play buttons baked into the poster image.