Custom thumbnails for native video element in HTML
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!
Like this article? Consider leaving a
Tip
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
