How to Add a Poster Image to an HTML5 Video? (The poster attribute)

Use the poster attribute on the <video> element to display a static image before playback; it accepts a URL to an image file, matches the video’s aspect ratio, and improves UX when optimized and tested across devices.

To add a poster image to an HTML5 video, use the poster attribute on the <video> element. This image displays before the video loads or plays — like a cover photo — and disappears once playback starts.

How the poster attribute works

The poster attribute accepts a URL pointing to an image file (e.g., JPG, PNG, or WebP). Browsers show it as a static placeholder while the video is loading, paused, or hasn’t been interacted with yet. It does not appear during playback or after the video ends unless manually reset via JavaScript.

• It’s supported in all modern browsers — no fallback needed for basic use
• The image should match the video’s aspect ratio to avoid stretching or letterboxing
• If omitted, the browser shows either a black screen or the first frame (varies by browser and codec)

Basic syntax and example

Add the poster attribute directly inside your <video> tag:

Make sure the path to the image is correct relative to your HTML file — just like with <img src>.

Best practices for poster images

A well-chosen poster improves UX and perceived performance:

• Use a high-contrast, visually clear frame — ideally from the video’s opening seconds
• Optimize the image: keep it under 100 KB and serve in modern formats like WebP where possible
• Test on mobile: some older Android versions don’t show poster images if the video has autoplay or muted attributes without user interaction
• Don’t rely on it for critical information — screen readers ignore it, and it won’t appear if images are disabled

Troubleshooting common issues

If your poster isn’t showing:

• Check the image path — open it directly in the browser to confirm it loads
• Ensure the <video> tag doesn’t have conflicting attributes like autoplay without muted (can cause loading delays or blocking)
• Verify the video file itself loads — if the <source> fails, some browsers skip the poster
• Try adding preload="metadata" to help the poster display more reliably

The above is the detailed content of How to Add a Poster Image to an HTML5 Video? (The poster attribute). For more information, please follow other related articles on the PHP Chinese website!