Dhairya Shah
Dhairya Shah's Blog

Dhairya Shah's Blog

Video Poster (thumbnail) in HTML

Video Poster (thumbnail) in HTML

Dhairya Shah's photo
Dhairya Shah
·Aug 26, 2022·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

You may have noticed the thumbnail of the video while watching it on YouTube. In this article, we will create the same thing using only HTML and no CSS/JavaScript.

To add a video with a poster, add the following code to your HTML:

<video poster="https://example.com/poster.png" width="640" height="480" controls>
  <source src="https://example.com/video.mp4" type="video/mp4">
</video>

This will add an image to the video. The controls attribute in the video tag is used to display play/pause controls to the user; otherwise, the video will be unplayable.

Try the live demo:

Thanks for reading

Follow me on Twitter

Thanks for reading!

 
Share this