Skip to main content

Command Palette

Search for a command to run...

Video Poster (thumbnail) in HTML

Published
•1 min read
Video Poster (thumbnail) in HTML
D

I am 17 years old and a young passionate and self-taught frontend web developer and have an intention to become a successful developer. I usually write about JavaScript and Web Development and share some tips in the articles.

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!

5 views

More from this blog

D

Dhairya Shah

119 posts