The HTML poster attribute
With the HTML poster attribute, as in poster="cover.jpg", a <video> shows that image until it plays or seeks. Loading leaves it in place, but once playback starts, pausing or reaching the end won't restore it. Without a poster, the first frame appears once the video loads it.
Overview
The HTML poster attribute names an image for a <video> to display before playback starts. The browser requests it as an image, so any format the browser can display works, including an SVG written as a data: URL.
Loading the video doesn't remove the poster. A video that has its first frame ready but hasn't played yet keeps showing the poster. Starting playback hides it, and so does a seek, even one made while the video stays paused.
Once gone, the poster doesn't return on its own. A paused video displays the frame at its current position, and a video that reaches its end stays on its last frame.
The poster can also decide the size of the player. The HTML standard sizes a video that has no width or height from its poster while the poster shows. In Chrome, a 400 by 100 poster holds the box at that size until a 320 by 180 video starts to play.
Syntax
<video src="lesson-3.mp4" poster="lesson-3-cover.jpg"
width="640" height="360" controls></video>Values
| Value |
|---|
| A URL pointing to an image. |
Example
<video id="clip" src="https://codeshack.io/web/example.mp4" width="224" height="126" controls muted
poster="data:image/svg+xml,%3Csvg%20xmlns='http%3A//www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231e3a5f'/%3E%3Ctext%20x='160'%20y='100'%20fill='%23fff'%20font-family='sans-serif'%20font-size='26'%20text-anchor='middle'%3ELesson%203%3C/text%3E%3C/svg%3E"></video>
<p>
<button type="button" id="play">Play</button>
<button type="button" id="seek">Jump to 0:03</button>
<button type="button" id="reset">Call load()</button>
</p>
<p id="msg" role="status">The poster shows until the video plays or jumps.</p>
<script>
const clip = document.getElementById('clip');
const msg = document.getElementById('msg');
document.getElementById('play').addEventListener('click', function () {
clip.play().catch(function (error) {
msg.textContent = error.message;
});
});
document.getElementById('seek').addEventListener('click', function () {
clip.currentTime = 3;
});
document.getElementById('reset').addEventListener('click', function () {
clip.load();
msg.textContent = 'load() reset the video, so the poster is back.';
});
clip.addEventListener('play', function () {
msg.textContent = 'Playing, so the poster is gone.';
});
clip.addEventListener('seeking', function () {
msg.textContent = 'Jumped to ' + clip.currentTime.toFixed(1) + ' s, so the poster is gone.';
});
clip.addEventListener('pause', function () {
msg.textContent = 'Paused on the current frame. The poster stays hidden.';
});
clip.addEventListener('ended', function () {
msg.textContent = 'Ended on the last frame, with no poster.';
});
</script>Best practices
- Give a video with a
posterexplicitwidthandheight, so its box keeps one size. Set both on every other video too, to avoid layout shift. - Export the poster at the video's aspect ratio. An image of another shape is drawn centered at its own proportions, with empty bars where it doesn't reach the edges of the player.
- Choose a frame that represents the video. A poster is meant to be a representative frame, typically one of the first non-blank frames, that gives viewers an idea of what the video is like.
- Combine the poster with
preload="none"on videos that people may never start. Such a video usually doesn't load until played, while its poster image still loads. - Set the loading attribute to lazy on videos far down the page, so the poster waits until the video nears the viewport. Chrome and Edge support that from version 150, while Firefox and Safari don't support it.
Frequently asked questions
What is a poster image on an HTML video?
Why is my video poster not showing?
How do I show the poster again after a video ends?
load() method, for example from an onended handler, to bring the poster back. Setting currentTime to 0 only rewinds to the first frame and leaves the poster hidden.
