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.

Example of the strapi-plugin-oembed plugin

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.

Strapi version	Plugin semver
Strapi v5	strapi-plugin-oembed@^2
Strapi v4	strapi-plugin-oembed@^1
Strapi v3	strapi-plugin-oembed@^0

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:

export default () => ({
  // ...
  oembed: {
    enabled: true,
  },
});

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

{
  "kind": "collectionType",
  "collectionName": "[content-type]",
  // ...
  "attributes": {
    // ...
    "oembed": {
      "type": "customField",
      "customField": "plugin::oembed.oembed"
    }
    // ...
  }
}

Example response

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

{
  "url": "https://www.youtube.com/watch?v=aqz-KE-bpKQ",
  "thumbnail": "data:image/jpeg;base64,...truncated...",
  "oembed": {
    "title": "Big Buck Bunny 60fps 4K - Official Blender Foundation Short Film",
    "author_name": "Blender",
    "author_url": "https://www.youtube.com/@BlenderOfficial",
    "type": "video",
    "height": 113,
    "width": 200,
    "version": "1.0",
    "provider_name": "YouTube",
    "provider_url": "https://www.youtube.com/",
    "thumbnail_height": 360,
    "thumbnail_width": 480,
    "thumbnail_url": "https://i.ytimg.com/vi/aqz-KE-bpKQ/hqdefault.jpg",
    "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>"
  }
}

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.