oEmbed

Embed content from third party sites (Youtube, Vimeo, Tiktok, Soundcloud, ...)

Strapi plugin oEmbed

Embed content from third party sites (Youtube, Vimeo, Tiktok, Soundcloud, Spotify, CodePen...) for https://strapi.io v4 (For strapi v3 use v0.4.0)

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 strapi-plugin-oembed
npm run build

Using yarn

yarn add 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  "url": "https://www.youtube.com/watch?v=tkiOqSTVGds",
3  "title": "Beautiful New Caledonia",
4  "thumbnail": "https://i.ytimg.com/vi/tkiOqSTVGds/hqdefault.jpg",
5  "mime": "video/youtube",
6  "rawData": {
7    "type": "video",
8    "thumbnail_url": "https://i.ytimg.com/vi/tkiOqSTVGds/hqdefault.jpg",
9    "thumbnail_width": 480,
10    "html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/tkiOqSTVGds?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
11    "version": "1.0",
12    "width": 480,
13    "author_url": "https://www.youtube.com/user/lilomoino",
14    "provider_name": "YouTube",
15    "thumbnail_height": 360,
16    "height": 270,
17    "author_name": "LilO Moino",
18    "provider_url": "https://www.youtube.com/",
19    "title": "Beautiful New Caledonia"
20  }
21}

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)).