Video Thumbnail

video-thumbnail

Generates a thumbnail from a video. It accepts one of two values:

  • An integer representing the time in seconds at which the thumbnail should be generated
  • auto (default): Generates a thumbnail using the first non-black frame of the video

When video-thumbnail is specified, the fm parameter behavior is modified. Instead, fm becomes a required parameter that determines the output format of the thumbnail.

Additionally, it allows you to use any parameter from the Rendering API to transform and optimize the thumbnail, including (but not limited to) auto=compress,format, w, h, fit, and crop.

Thumbnail and video are separate requests

A URL with video-thumbnail returns an image, not a video. You must use two separate URLs: one for the video (fm=mp4) and one for the thumbnail (fm=jpg&video-thumbnail=N). A single URL cannot return both.

Using video-thumbnail with HTML

Use the poster attribute on the <video> element for the thumbnail URL and src for the video URL:

<video
  controls
  poster="https://myhost.imgix.net/myvideo.mp4?fm=jpg&video-thumbnail=3"
  src="https://myhost.imgix.net/myvideo.mp4?fm=mp4"
>
  Your browser does not support the video tag.
</video>

You can use the Video Thumbnail Picker Demo below to test the video-thumbnail parameter.

Loading storyboard data...