Simple Video Thumbnails for Frontend Developers

Examples

Responsive Image (Recommended)

Let's the browser pick the exact right image for the screen size so it loads as fast as possible.

Vimeo Thumbnail

Image HTML

<!-- Reference Docs: https://vumbnail.com --> <img srcset=" https://vumbnail.com/621585396.jpg 640w, https://vumbnail.com/621585396_large.jpg 640w, https://vumbnail.com/621585396_medium.jpg 200w, https://vumbnail.com/621585396_small.jpg 100w " sizes="(max-width: 640px) 100vw, 640px" src="https://vumbnail.com/621585396.jpg" alt="Vimeo Thumbnail" />



JPG Example

Regular Thumbnail Example

Image URL

https://vumbnail.com/621585396.jpg


JPG Large Example

Large Thumbnail Example

Image URL

https://vumbnail.com/621585396_large.jpg


JPG Medium Example

Medium Thumbnail Example

Image URL

https://vumbnail.com/621585396_medium.jpg


JPG Small Example

Small Thumbnail Example

Image URL

https://vumbnail.com/621585396_small.jpg


Coming Soon

Animated Thumbnail Example

Pro

An animated preview thumbnail of the Vimeo video.

Join Waitlist

Animated Thumbnail HTML

<!-- You're clever. This is just filler code for now, but since you found this here's something special for you: https://forms.gle/uPY9odQvVJwmNsYj6 --> <video autoplay muted loop playsinline preload="none"> <source src="https://vumbnail.com/media/breathtaking.mp4" type="video/mp4"> </video>