A Strapi custom video field that allows you to preview, and add videos with external source to your application.
Adds custom video field to your Strapi application
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 !
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
}
Strapi v4.x.x+
Node 14 - 16
Tested on v4.4.1
npm install @sklinet/strapi-plugin-video-field
Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.