Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nicolashmln/strapi-plugin-oembed
Embed content from third party sites (Youtube, Vimeo, Soundcloud, ...) in Strapi
https://github.com/nicolashmln/strapi-plugin-oembed
Last synced: 8 days ago
JSON representation
Embed content from third party sites (Youtube, Vimeo, Soundcloud, ...) in Strapi
- Host: GitHub
- URL: https://github.com/nicolashmln/strapi-plugin-oembed
- Owner: nicolashmln
- Created: 2020-11-04T15:21:22.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-12-09T00:26:18.000Z (11 months ago)
- Last Synced: 2024-10-19T20:55:21.412Z (20 days ago)
- Language: JavaScript
- Homepage:
- Size: 2.27 MB
- Stars: 76
- Watchers: 4
- Forks: 21
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# 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
```bash
npm install --save strapi-plugin-oembed
npm run build
```
Using yarn
```bash
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
```json
{
"kind": "collectionType",
"collectionName": "articles",
...
"attributes": {
...
"oembed": {
"type": "customField",
"customField": "plugin::oembed.oembed"
}
...
}
}
```
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:
```json
{
"url": "https://www.youtube.com/watch?v=tkiOqSTVGds",
"title": "Beautiful New Caledonia",
"thumbnail": "https://i.ytimg.com/vi/tkiOqSTVGds/hqdefault.jpg",
"mime": "video/youtube",
"rawData": {
"type": "video",
"thumbnail_url": "https://i.ytimg.com/vi/tkiOqSTVGds/hqdefault.jpg",
"thumbnail_width": 480,
"html": "",
"version": "1.0",
"width": 480,
"author_url": "https://www.youtube.com/user/lilomoino",
"provider_name": "YouTube",
"thumbnail_height": 360,
"height": 270,
"author_name": "LilO Moino",
"provider_url": "https://www.youtube.com/",
"title": "Beautiful New Caledonia"
}
}
```
**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
- Youtube
- Vimeo
- Tiktok
- Soundcloud
- Spotify
- CodePen
- Twitter
Feel free to submit a PR with the provider you want, you just have to edit this file: `server/services/oembed.js`.
[](https://ko-fi.com/E1E0H3N9M)