How to set thumbnail image or poster for HTML5 video tag?

If you are using the HTML5 <video> tag to include a video on your webpage, and you want to add a thumbnail that is displayed in place of the video until the video gets loaded, then this article will help you implement this.

We have multiple solutions for you to add a thumbnail for your HTML video.

Using the poster attribute

You can use the poster attribute in the <video> tag to add a custom thumbnail to your video element on your webpage.

Let's see how you can do it:

<video poster="video-thumbnail.webp">
    <source src="how-it-works-short.mp4" type="video/mp4" />
    <source src="how-it-works-short.webm" type="video/webm" />
    Your browser does not support the video tag.
</video>

• As you can see in the code above, we have used the poster attribute in the opening <video> tag. Provide your thumbnail's URL as the value for the poster attribute and you are done.

• You can use images of any format. It can be PNG, JPG, or WEBP, etc. although we would recommend you to use .webp image format because it is the best-suited image format for the web.

• The poster image or the thumbnail image for the video will take the exact size as the video element.

You can provide other attributes like autoplay, loop, etc. along with the poster attribute and you can also use width and height attributes to adjust the size of the video.

<video width="100%" height="auto" controls autoplay loop poster="video-thumbnail.webp">
    <source src="how-it-works-short.mp4" type="video/mp4" />
    <source src="how-it-works-short.webm" type="video/webm" />
    Your browser does not support the video tag.
</video>

Using Video's first frame as Thumbnail

If you don't want to add a custom thumbnail and you don't want to get into the hassle of using a separate image as a thumbnail, you can use the first frame of the video itself as the thumbnail.

<video width="400" controls preload="metadata">
    <source src="my_video.mp4#t=0.1" type="video/mp4">
</video>

If you look closely in the above code there are two things to note:

1. We have used the preload="metadata" attribute in the <video> tag.

2. And we have specified #t=0.1 after the path of the video. This is to tell the browser which frame to pick as the thumbnail.

This only works if the video is preloaded. It may not work in IE. So please test this when you use it.

Why should I add a thumbnail for an HTML video on my webpage?

For people with a slow internet connection, the video loading can take time. While the video loads, the user will see an empty blank space and even if the video gets loaded the user won't be able to play it.

Also, what if the user's browser doesn't support Videos, then what?

All these cases are handled by adding a thumbnail to the video which gets loaded immediately. Once the video has loaded properly the browser automatically shows the video.

So adding a thumbnail is just a fallback.