Add Video Preview Image in HTML

November 23, 2021 - 1 minute read

In HTML, you can display a “thumbnail” placeholder image before a video is loaded.

There are two common ways to go about doing this, and one is to use the video tag’s poster attribute:

<video src="path/to/video.mp4" poster="/path/to/thumbnail.jpg"></video>

Simply set the poster attribute to the URL of the thumbnail.

Another common approach is to place an img tag pointing to the preview image inside of a figure tag, just before the corresponding video tag, like this:

<figure>
    <img src="path/to/thumbnail.jpg" alt="Video preview">
    <video src="path/to/video.mp4"></video>
</figure>

Conclusion

Anyway, those are some of the easiest ways to go about adding a thumbnail to a video in HTML.

I hope this helped you out!

Link to this section Conclusion

Conclusion