@devx-labs/strapi-plugin-video-thumbnail

Strapi 5 plugin that automatically extracts a thumbnail from an uploaded video and sets it on a configurable preview image field — all client-side, no FFmpeg required.

How it works

When an editor opens a content entry that has a video field, the plugin:

1. Seeks to 0.1 s into the video to skip potential black frames
2. Draws the frame onto a canvas, resizes it to max 240 px wide
3. Exports it as WebP at 70% quality
4. Checks the media library for an existing thumbnail with the same name (avoids duplicates)
5. Uploads it to the same folder as the original video
6. Sets the result on the configured preview image field automatically

The editor just has to save the entry.

Install

npm install @devx-labs/strapi-plugin-video-thumbnail
# or
yarn add @devx-labs/strapi-plugin-video-thumbnail

Configure

In config/plugins.ts (or config/plugins.js):

export default {
  'video-thumbnail': {
    enabled: true,
    config: {
      contentTypes: [
        {
          uid: 'api::reel.reel',
          // optional: only activate when a field equals a value
          condition: { field: 'type', value: 'VIDEO' },
          // dot-path to the video media field
          videoField: 'video.video',
          // dot-path to the preview image field
          previewField: 'video.preview_image',
        },
      ],
    },
  },
};

Config options

| Key | Type | Required | Description | |---|---|---|---| | uid | string | ✅ | Content type UID | | videoField | string | ✅ | Dot-path to the video media field | | previewField | string | ✅ | Dot-path to the preview image field | | condition.field | string | — | Only activate when this field… | | condition.value | any | — | …equals this value |

Multiple content types

contentTypes: [
  {
    uid: 'api::reel.reel',
    condition: { field: 'type', value: 'VIDEO' },
    videoField: 'video.video',
    previewField: 'video.preview_image',
  },
  {
    uid: 'api::course.course',
    videoField: 'introVideo',
    previewField: 'coverImage',
  },
],

Requirements

• Strapi 5
• The video must be publicly accessible from the browser (same origin or CORS-enabled CDN). If the CDN blocks cross-origin requests the frame extraction will fail with a CORS error.

License

MIT