Custom thumbnails for native video element in HTML
<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.
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.
video element has a similar option that you can use to replicate the same behavior.
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.
(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!