Strapi plugin oEmbed

Embed videos, pictures and rich content from hundreds of third-parties in to Strapi via the admin interface. For more information about oEmbed, check out the article Enhance your Strapi content with rich media using oEmbed.

Use cases

• Video: YouTube, Vimeo, TikTok, Twitch, DailyMotion
• Photo: Imgur, Flickr, DeviantArt, Unsplash, Instagram
• Rich: Twitter, Pinterest, SlideShare, SoundCloud, CodePen, JSFiddle
• ... plus hundreds more providers.

Installation

Ensure the version of this plugin corresponds with the correct version of Strapi that you are using.

Install the package to your repository:

# npm
npm install --save strapi-plugin-oembed@^2

# yarn
yarn add strapi-plugin-oembed@^2

Enable the plugin:

config/plugins.ts:

1export default () => ({
2  // ...
3  oembed: {
4    enabled: true,
5  },
6});

Migration

Check the migration documentation for important information on how to upgrade from Strapi version 4 to Strapi version 5.

Usage

Edit the content type model and insert the oembed field to theattributes section.

./src/api/[content-type]/content-types/[content-type]/schema.json

1{
2  "kind": "collectionType",
3  "collectionName": "[content-type]",
4  // ...
5  "attributes": {
6    // ...
7    "oembed": {
8      "type": "customField",
9      "customField": "plugin::oembed.oembed"
10    }
11    // ...
12  }
13}

Example response

Assuming the URL: https://www.youtube.com/watch?v=aqz-KE-bpKQ is used:

1{
2  "url": "https://www.youtube.com/watch?v=aqz-KE-bpKQ",
3  "thumbnail": "data:image/jpeg;base64,...truncated...",
4  "oembed": {
5    "title": "Big Buck Bunny 60fps 4K - Official Blender Foundation Short Film",
6    "author_name": "Blender",
7    "author_url": "https://www.youtube.com/@BlenderOfficial",
8    "type": "video",
9    "height": 113,
10    "width": 200,
11    "version": "1.0",
12    "provider_name": "YouTube",
13    "provider_url": "https://www.youtube.com/",
14    "thumbnail_height": 360,
15    "thumbnail_width": 480,
16    "thumbnail_url": "https://i.ytimg.com/vi/aqz-KE-bpKQ/hqdefault.jpg",
17    "html": "<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/aqz-KE-bpKQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen title=\"Big Buck Bunny 60fps 4K - Official Blender Foundation Short Film\"></iframe>"
18  }
19}

• The url property is the value you typed.
• The thumbnail is a base64 encoded string of the thumbnail, if there is one
• The oembed contains the raw oembed data.