HTML poster Attribute

Introduction

The poster attribute sets a thumbnail image on the <video> element. Browsers show this image before the user presses play and while the first video frame is loading. It gives visitors a visual preview of the content — like a movie poster or YouTube thumbnail. The value is a URL to an image file (JPEG, PNG, WebP). Once playback starts, the poster is replaced by video frames. Use video.poster in JavaScript to swap thumbnails dynamically. Pair with preload and controls for a polished media experience.

What You’ll Learn

Purpose of poster Attribute

Without a poster, a video may show a blank or black rectangle until the user interacts or the first frame loads. The poster attribute solves this by displaying a chosen still image — a marketing thumbnail, title card, or representative frame from the clip.

This improves first impressions on landing pages, course platforms, and product demos. A good poster tells users what the video is about before they commit to loading and playing it.

📝 Syntax

Add poster with an image URL on a video element:

<video controls width="320"
  poster="/images/apple.png">
  <source src="/video/count.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Syntax Rules

• Value is a URL string pointing to an image (relative or absolute).
• Valid only on <video> — not on audio or other elements.
• Shown until playback begins; hidden once video frames render.
• Works with controls, preload, autoplay, and muted.
• JavaScript: video.poster = "/images/new-thumb.jpg".
• Empty poster="" removes the custom thumbnail.
• Optimize image size — posters load before the video, so keep files reasonably small.

💎 Values

The poster attribute accepts a URL to an image file:

• poster="/images/video-thumb.jpg" — Relative path on your site.
• poster="https://example.com/preview.png" — Absolute URL.
• poster="/images/apple.png" — PNG thumbnail.
• poster="" — No custom poster (browser default appearance).

<!-- Relative path -->
<video poster="/images/apple.png" controls>…</video>

<!-- Absolute URL -->
<video poster="https://cdn.example.com/intro.webp" controls>…</video>

Applicable Elements

poster vs preload vs first frame

Examples Gallery

Basic video poster, dynamic video.poster in JavaScript, and comparing video with and without a poster.

<video controls width="320"
  poster="/images/apple.png">
  <source src="/video/count.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<video id="myVideo" controls width="320"
  poster="/images/apple-80.png">
  <source src="/video/count.mp4" type="video/mp4">
</video>
<button type="button" id="swapBtn">Change poster</button>

<script>
  document.getElementById("swapBtn").addEventListener("click", function () {
    document.getElementById("myVideo").poster = "/images/apple-120.png";
  });
</script>

<!-- With poster -->
<video controls width="240" poster="/images/apple.png">
  <source src="/video/count.mp4" type="video/mp4">
</video>

<!-- Without poster (may show blank/black) -->
<video controls width="240" preload="none">
  <source src="/video/count.mp4" type="video/mp4">
</video>

♿ Accessibility

• Poster is decorative preview — It is not read as the video’s accessible name. Provide context with a visible heading or aria-label on the video when needed.
• Meaningful nearby text — Describe what the video covers in prose next to the player, not only in the poster image.
• Captions and transcripts — Use <track kind="captions"> for spoken content; poster does not replace captions.
• Contrast on custom play buttons — If you hide native controls, ensure overlay buttons meet contrast requirements.
• Don’t rely on poster text alone — Text baked into images is not accessible to screen readers.

💡 Best Practices