Dhairya Shah
Dhairya Shah's Blog

Follow

Dhairya Shah's Blog

Follow
Video Poster (thumbnail) in HTML

Video Poster (thumbnail) in HTML

Dhairya Shah's photo
Dhairya Shah
ยทAug 26, 2022ยท

1 min read

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