Aug 26th, 2022

Video Poster (thumbnail) in HTML

Author Picture

Dhairya Shah

Software Engineer

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">

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:

See the Pen by Dhairya Shah (@dhairyathedev) on CodePen.

Thanks for reading

Follow me on Twitter

Thanks for reading!