Strapi plugin logo for oEmbed extended

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

STATS

No GitHub star yetNot downloaded this week

Last updated

679 days ago

Strapi Version

4.4.0 and above

Author

github profile image for Azin Azadi
Azin Azadi

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.