How do I get a thumbnail image from a specific moment in a video?

The question

"How do I change the video thumbnail to a specific part of the video, without making the video start from that point?"

A poster is the still image that shows before a video plays, and in lists and previews. By default, Cloudinary uses the middle frame of the video. Often that isn't the best frame, so you may want to choose another one.

The original asset

The examples use this 10.9-second video:

The solution

1. Request the video as an image. Use an image extension (.jpg, .png, .webp, or .avif) in place of the video extension, to deliver a single frame as an image.
2. Choose the frame. Add the start offset (so_) as the number of seconds from the start of the video, or as a percentage of the video's length (such as so_50p).

This example takes the frame at 8 seconds:

Without an offset, the thumbnail is the frame from the middle of the video. For the first frame, use so_0. These are the frames at 2 seconds and at 50% of the video:

Let Cloudinary choose the frame

To have Cloudinary pick a suitable frame automatically, use so_auto:

Resize the poster to fit your page

Add a resize in a separate component, so that the poster is the size you need. This example creates a 700x400 poster from the frame at 8 seconds:

Use the image as the poster of an HTML video

Set the image URL as the poster attribute of your video tag, so it shows before the video plays:

Related topics

• Video thumbnails
• Video previews and posters
• Start offset (so)