Strapi plugin Video Field

Adds custom video field to your Strapi application

👋 Intro

• Features
• Installation
• Requirements

✨ Key feature

• Video field: This plugin adds custom video field into your Strapi application ! Plugin currently supports YouTube, Vimeo, and Facebook videos.
• Facebook videos: If using videos from Facebook, please keep in mind, that you must use url, which contains "facebook" in it in order to make them work.

🔧 Installation

Inside your Strapi app, add the package:

With npm:

npm install @sklinet/strapi-plugin-video-field

With yarn:

yarn add @sklinet/strapi-plugin-video-field

In config/plugins.js file add:

1"video-field":{
2    enabled:true
3};

If you do not yet have this file, then create and add:

1module.exports = () => ({
2    "video-field":{
3      enabled:true
4    };
5})

In config/middlewares.js file extend "strapi::security" middleware:

1{
2        name: "strapi::security",
3        config: {
4            contentSecurityPolicy: {
5                useDefaults: true,
6                directives: {
7                    "frame-src":[
8                        "'self'",
9                        "youtube.com",
10                        "www.youtube.com",
11                        "vimeo.com",
12                        "*.vimeo.com",
13                        "facebook.com",
14                        "www.facebook.com",
15                    ],
16                },
17            },
18        },
19    },

If you do not yet have this file, then create and add:

1module.exports = [
2    "strapi::errors",
3    {
4        name: "strapi::security",
5        config: {
6            contentSecurityPolicy: {
7                useDefaults: true,
8                directives: {
9                    "frame-src": [
10                        "'self'",
11                        "youtube.com",
12                        "www.youtube.com",
13                        "vimeo.com",
14                        "*.vimeo.com",
15                        "facebook.com",
16                        "www.facebook.com",
17                    ],
18                    "connect-src": ["'self'", "https:", "blob:", "*.strapi.io",],
19                    "img-src": [
20                        "'self'",
21                        "data:",
22                        "blob:",
23                        "dl.airtable.com",
24                        "strapi.io",
25                        "s3.amazonaws.com",
26                        "cdn.jsdelivr.net",
27                    ],
28                    "style-src": ["'self'", "'unsafe-inline'"],
29                    "media-src": ["'self'", "data:", "blob:"],
30                    "script-src": [
31                        "'self'",
32                        "cdn.jsdelivr.net",
33                        "blob:",
34                        "https:",
35                    ],
36                    "font-src": ["'self'"],
37                    upgradeInsecureRequests: null,
38                },
39            },
40        },
41    },
42    "strapi::cors",
43    "strapi::poweredBy",
44    "strapi::logger",
45    "strapi::query",
46    "strapi::body",
47    "strapi::session",
48    "strapi::favicon",
49    "strapi::public",
50];

Then run build:

npm run build

or

yarn build

All done, you're now able to use video-field plugin ! After installation, you will find the video field at the custom fields section of the content-type builder.

This plugin returns value in JSON format. Your video-field will return data like this:

1{
2    provider: "videoUid", // Provider of the video (youtube, vimeo, or facebook)
3    providerUid: "RANDOMUID", // UID of the video
4    url: "https://www.examplevideourl.com/RANDOMUID" // the whole URL of the video
5}

⚠️ Requirements

Strapi v5.x.x+

Node >= v20.x.x

Tested on v5.1.1