api.video

A powerful Strapi plugin to easily manage your (api)videos and integrate them in your project.

Strapi v5 – api.video plugin

A powerful Strapi plugin to easily manage your videos and integrate them in your project.

Core Contributor: Strawbinary
Follow @strawbinary

About this Plugin: This plugin is a fork of Strapi v4 - api.video uploader, originally developed by the api.video team under the MIT license.

This version updates the plugin for Strapi 5 and introduces several improvements.

Plugin UI Preview

✨ Features

Upload videos directly from your Strapi admin via file picker to api.video
Manage assets with a responsive grid and built-in pagination
Search your library by title or tags
Preview with the embedded api.video player (api.video-player-react)
Delete assets (removes on both Strapi and api.video sides)

⏳ Installation

This plugin is published on npm. You can install it with your preferred package manager—npm, yarn, or pnpm.

# Using npm (recommended)
npm install @strawbinary-io/api-video-strapi-5-plugin@latest

# Or with yarn
yarn add @strawbinary-io/api-video-strapi-5-plugin@latest

# Or with pnpm
pnpm add @strawbinary-io/api-video-strapi-5-plugin@latest

After installation, rebuild your Strapi admin:

npm run build
npm run develop

Once Strapi is up, the API.VIDEO plugin will in the sidebar.

🖐 Requirements

api.video
- An api.video account
- An API key from the api.video Dashboard
Node.js
- Version: 18.x – 20.x
Strapi
- Strapi v5 only (not compatible with v4 or earlier)

🔧 Configuration

Before using the plugin, you must supply your api.video API key in Strapi’s settings panel.

In Strapi Admin, go to Settings → API.VIDEO Plugin.
Enter your API key and click Save.

Content Security Policy

To allow thumbnails, embeds and the player to load correctly, update your config/middlewares.ts file with the following security entry:

1export default [
2  'strapi::logger',
3  'strapi::errors',
4  {
5    name: 'strapi::security',
6    config: {
7      contentSecurityPolicy: {
8        useDefaults: true,
9        directives: {
10          'connect-src': ["'self'", 'https:'],
11          'img-src': ["'self'", 'data:', 'blob:', 'embed.api.video', 'cdn.api.video/vod/'],
12          'script-src': ["'self'", "'unsafe-inline'", "'unsafe-eval'"],
13          'frame-src': ["'self'", 'data:', 'blob:', 'embed.api.video'],
14          upgradeInsecureRequests: null,
15        },
16      },
17    },
18  },
19  'strapi::cors',
20  'strapi::poweredBy',
21  'strapi::query',
22  'strapi::body',
23  'strapi::session',
24  'strapi::favicon',
25  'strapi::public',
26];