oEmbed extended
Embed content from third party sites. This plugin is based on nicolashmln/strapi-plugin-oembed. It adds all possible 700+ embedable sources via the extractus/oembed-extractor library.
Strapi plugin oEmbed-extended
Embed content from third party sites for https://strapi.io v4. This plugin is based on nicolashmln/strapi-plugin-oembed. It adds all possible embedable sources via the extractus/oembed-extractor library.
How it works
- Add the field in your model
- When you create a new content, paste the URL of the third party site in the modal
- The data is fetched and stored in the content
Installation
Using npm
npm install --save @7azin/strapi-plugin-oembed
npm run build
Using yarn
yarn add @7azin/strapi-plugin-oembed
yarn build
Setup
Go to your model and add the oembed
field. For example if you have a content type Article
it will be in /api/article/models/article.settings.json
and paste the field in the attributes
section.
e.g
1{
2 "kind": "collectionType",
3 "collectionName": "articles",
4 ...
5 "attributes": {
6 ...
7 "oembed": {
8 "type": "customField",
9 "customField": "plugin::oembed.oembed"
10 }
11 ...
12 }
13}
Now you'll have the oembed field when you create a new article.
Example of the data fetched
If you paste the url https://www.youtube.com/watch?v=tkiOqSTVGds
in the modal, this data will be stored:
1{
2 "title":"Familien gehören zusammen! - Dokumentation",
3 "author_name":"Seebrücke",
4 "author_url":"https://www.youtube.com/@Seebruecke",
5 "type":"video",
6 "height":113,
7 "width":200,
8 "version":"1.0",
9 "provider_name":"YouTube",
10 "provider_url":"https://www.youtube.com/",
11 "thumbnail_height":360,
12 "thumbnail_width":480,
13 "thumbnail_url":"https://i.ytimg.com/vi/fn-KS8vDJuI/maxresdefault.jpg",
14 "html":"<iframe ... ></iframe>",
15 "fetched_thumbnail":"data:image/jpg;base64, BASE64 IMAGE DATA",
16 "url":"https://www.youtube.com/watch?v=fn-KS8vDJuI"
17}
for Instagram you would get
1{
2 "url":"https://www.instagram.com/p/CtosQTNsUXt/",
3 "provider_name":"Instagram"
4}
As long as you don't have a special token from Instagram, they don't provide any OEmbed service. We provide still the URL and you can use it together with a front end embed platform to show the Instagram Embed.
for Twitter you would get
1{
2 "url":"https://twitter.com/_Seebruecke_/status/1599102388710670336",
3 "author_name":"Seebrücke",
4 "author_url":"https://twitter.com/_Seebruecke_",
5 "html":"<blockquote ...",
6 "width":550,
7 "height":null,
8 "type":"rich",
9 "cache_age":"3153600000",
10 "provider_name":"Twitter",
11 "provider_url":"https://twitter.com",
12 "version":"1.0"
13}
Note: the data returned from your endpoint will be a string and not a JSON object. You'll just have to parse the data in your front (JSON.parse(article.oembed)
).
Supported third party sites
All 700 services supported by official OEmbed are supported.
Install now
npm install @7azin/strapi-plugin-oembed
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.