Strapi plugin logo for Video Field

Video Field

A Strapi custom video field that allows you to preview, and add videos with external source to your application.

Strapi plugin Video Field

Adds custom video field to your Strapi application

Image of Video Field

👋 Intro

✨ 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

Install now

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

STATS

6 GitHub stars371 weekly downloads

Last updated

178 days ago

Strapi Version

4.0.0 and above

Author

github profile image for SKLINET s.r.o.
SKLINET s.r.o.

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.