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.