**`poster`** gives you control over the very first thing a visitor sees for a `<video>`, instead of the browser's default behavior (often a blank black frame, or an arbitrary early frame of the video, before the user presses play). It's especially useful for setting an intentional, polished thumbnail — like a custom title card — rather than leaving it to chance. Note that `poster` is exclusive to `<video>`; `<audio>` has no visual component and therefore no equivalent attribute.
1Understanding poster
`poster` gives you control over the very first thing a visitor sees for a <video>, instead of the browser's default behavior (often a blank black frame, or an arbitrary early frame of the video, before the user presses play). It's especially useful for setting an intentional, polished thumbnail — like a custom title card — rather than leaving it to chance. Note that poster is exclusive to <video>; <audio> has no visual component and therefore no equivalent attribute.
Without a poster, some browsers show a solid black frame before playback, which can look like a broken video to users — setting an explicit poster avoids that awkward first impression.
<video controls poster="/course-intro-thumb.jpg" width="800">
<source src="/course-intro.mp4" type="video/mp4">
</video>2Practical Example
Here is a real-world application of poster showing how it is used in production HTML.
<!-- No poster set: browser behavior for the initial frame is inconsistent -->
<video controls>
<source src="/clip.mp4" type="video/mp4">
</video>3Best Practices
Follow these guidelines when working with poster:
1. Always set a poster image for video content to control the pre-play appearance
2. Use an image with the same aspect ratio as the video to avoid letterboxing/cropping surprises
3. Keep the poster's file size reasonably small, since it loads immediately regardless of whether the user ever plays the video
Tip: Without a poster, some browsers show a solid black frame before playback, which can look like a broken video to users — setting an explicit poster avoids that awkward first impression.
<video controls poster="/course-intro-thumb.jpg" width="800">
<source src="/course-intro.mp4" type="video/mp4">
</video>