HtmlHow-ToBeginner · 3 min read

How to Add Poster to Video in HTML: Simple Guide

To add a poster image to a video in HTML, use the poster attribute inside the <video> tag. This attribute points to an image file that displays before the video plays, giving users a preview.

📐

Syntax

The poster attribute is added inside the <video> tag. It should contain the URL or path to the image you want to show before the video starts.

<video>: The HTML tag to embed video.
poster: Attribute specifying the preview image.
src: Attribute specifying the video file.
controls: Attribute to show video controls like play/pause.

html

<video src="video.mp4" poster="preview.jpg" controls></video>

Output

A video player with controls and a preview image shown before playback.

💻

Example

This example shows a video with a poster image. The poster image appears before you press play. Once you click play, the video starts and the poster disappears.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video with Poster Example</title>
</head>
<body>
  <video width="640" height="360" controls poster="https://www.w3schools.com/html/pic_trulli.jpg">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</body>
</html>

Output

A 640x360 video player with controls and a preview image of a trulli house before the video plays.

⚠️

Common Pitfalls

Some common mistakes when using the poster attribute include:

Using a wrong or broken image URL, so no preview shows.
Not including the controls attribute, which can confuse users if they can't play the video.
Using a very large image that slows page loading.
Forgetting to provide fallback text inside the <video> tag for unsupported browsers.

html

<!-- Wrong way: missing poster or broken URL -->
<video src="video.mp4" controls poster="wrong-image.jpg"></video>

<!-- Right way: valid poster URL and controls -->
<video src="video.mp4" controls poster="preview.jpg"></video>

📊

Quick Reference

Attribute	Description	Example
poster	URL of the image shown before video plays	poster="image.jpg"
src	URL of the video file	src="video.mp4"
controls	Shows video controls like play/pause	controls
width	Width of the video player	width="640"
height	Height of the video player	height="360"

✅

Key Takeaways

Use the poster attribute inside the <video> tag to set a preview image.

Make sure the poster image URL is correct and loads quickly for best user experience.

Always include controls so users can play or pause the video easily.

Provide fallback text inside the <video> tag for browsers that do not support video.

Keep poster images optimized in size to avoid slowing down page load.