Custom thumbnails for native video element in HTML

Amit Merchant · September 27, 2021 ·

The <video> is an HTML element that can be used to embed a media player on a page that can a variety of video formats. Here’s how a simple video embed with an external video source would look like.

See the Pen Simple HTML video player demo by Amit Merchant (@amit_merchant) on CodePen.

Now, there are a lot of things that you can customize for this <video> element but I’m going to show you a configuration that I recently discovered and I found it quite useful.

So, if you have ever uploaded a YouTube video, you might know that you can provide a custom thumbnail for the video that will get showed up when the video is not started playing yet or it is being shown as the first frame when the video starts playing.

The video element has a similar option that you can use to replicate the same behavior.

The poster attribute

The poster attribute can be provided to the <video> element. A URL of an image can be set as a poster which will be shown when the video is not started playing yet.

<video 
    controls 
    width="300" 
    poster="https://www.amitmerchant.com/cdn/custom-thumbnail-video-element.png"
>
    <source 
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        type="video/mp4">
</video>

So, if we change the previous example by using the poster attribute, it looks like so.

See the Pen Simple HTML video player demo by Amit Merchant (@amit_merchant) on CodePen.

(Try opening the video in fullscreen)

As you can tell, now that we are using the poster attribute on the <video> element (where we have given a .png image), it will be now shown as a thumbnail for this video instead of a blank screen… just like a YouTube thumbnail!

👋 Hi there! I'm Amit. I write articles about all things web development. If you like what I write and want me to continue doing the same, I would like you buy me some coffees. I'd highly appreciate that. Cheers!

Comments?