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
2
3
"video-field":{
    enabled:true
};

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

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

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

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

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

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

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
3
4
5
{
    provider: "videoUid", // Provider of the video (youtube, vimeo, or facebook)
    providerUid: "RANDOMUID", // UID of the video
    url: "https://www.examplevideourl.com/RANDOMUID" // the whole URL of the video
}

⚠️ Requirements

Strapi v4.x.x+

Node 14 - 16

Tested on v4.4.1