Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
poster
Video placeholder image displayed before playback begins. Prevents blank frames, reduces layout shift, and pairs with preload for bandwidth savings.
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
| Value | Behavior |
|---|---|
| URL string | Display this image before playback begins |
| (absent) | Browser shows the first frame once available, or a blank area |
Basic poster usage
<!-- Basic poster: show a frame before playback --><video src="product-demo.mp4" poster="product-demo-poster.jpg" controls width="640" height="360"></video>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.
Poster with preload none
<!-- Maximum bandwidth savings: poster + no preload --><video src="hero-video.mp4" poster="hero-poster.jpg" preload="none" controls width="1280" height="720"></video>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).
Layout shift prevention
<!-- Prevent layout shift: always set width and height --><video src="tutorial.mp4" poster="tutorial-poster.jpg" controls width="1920" height="1080" style="max-width: 100%; height: auto;"></video>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 with source elements
<!-- Poster with multiple sources --><video poster="interview-poster.jpg" controls width="640" height="360"> <source src="interview.webm" type="video/webm" /> <source src="interview.mp4" type="video/mp4" /> <p>Your browser does not support HTML video. <a href="interview.mp4">Download the video</a>.</p></video>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.
Responsive poster
<!-- Responsive poster with picture-like approach --><video src="showcase.mp4" poster="showcase-poster-1280.jpg" controls width="1280" height="720" style="max-width: 100%; height: auto;"></video> <!-- For different poster images at different sizes, generate the poster at the video's intrinsic resolution. The browser scales it to fit the video element. -->Accessibility
- The poster image is purely visual. It has no
altattribute mechanism. Ensure the surrounding content (heading, caption, oraria-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
srcsetequivalent 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
autoplayis 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.