Video Poster (thumbnail) in HTML

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:

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

Thanks for reading

Follow me on Twitter

Thanks for reading!