nicolashmln / strapi-plugin-oembed Goto Github PK

Hello!

When trying to install this on Strapi 4.6.0 it is failing to open the content type as well as the collection that I added the oembed to.

On the client it's failing with TypeError: l.get(...) is undefined. I added oembed in my content type as follows:

{ "kind": "collectionType", "collectionName": "projects", "info": { "singularName": "project", "pluralName": "projects", "displayName": "Project", "description": "" }, "options": { "draftAndPublish": true }, "pluginOptions": {}, "attributes": { "title": { "type": "string", "required": true }, "description": { "type": "richtext" }, "title_image": { "type": "media", "multiple": false, "required": true, "allowedTypes": ["images", "videos"] }, "oembed": { "type": "customField", "customField": "plugin::oembed.oembed" }, "categories": { "type": "relation", "relation": "manyToMany", "target": "api::category.category", "mappedBy": "projects" } } }

Is this the correct way of installing this plug-in? I added it to /api/project/content-types/project/schema.json since I could not find the equivalent to /api/article/models/article.settings.json in my folder structure (following the installation guide on the plug-in page). Any help would be appreciated!

Please provide functional thats will allow to choose source of embeding.

Now component accept a few different types (Youtube, Vimeo, SoundCloud, e.t.c) but if i want accept links from Youtube and/or Vimeo only i need write additional logic.

Feature request:

I want to embed several videos from vimeo that have domain-level privacy settings. For that I need to send a Referer header with the request (see Vimeo Docs). I solved this by overriding the oembed service in my extensions folder.

fetchedData = await axios.get(`https://vimeo.com/api/oembed.json?url=${encodeURIComponent(url)}`, { 'headers': { 'Referer': refererDomain } })

I only need to embed the videos on one domain, so I hardcoded refererDomain as a constant.

Perhaps it is possible to find a general solution for this instead of overriding files and hardcoding domains. But I don't know where settings can be stored for a strapi plugin or how to add a field to the frontend.

And after all I'm not sure wether this setting should be a general setting for all vimeo videos or should it be possible to set it for every video.

Thanks

Hi,

I have installed oembed and inserted in to my model but get the following message in my views inside of the Strapi UI: Oembed
This oembed is not available

"attributes": { "Title": { "type": "string" }, "Slug": { "type": "string" }, "body": { "type": "richtext" }, "oembed": { "type": "oembed", "columnType": "longtext" } }

Many thanks,

Steve

It would be great if the plugin could accept more sources. The best solution would be to have a UI or place in the strapi project to configure new parsers.

Example

https://api.datawrapper.de/v3/oembed?format=json&url=https%3A%2F%2Fdatawrapper.dwcdn.net%2FWpAbK%2F2%2F

Base URL Input: https://api.datawrapper.de/v3/oembed?format=json&url=
Matching Domains: datawrapper.dwcdn.net

You could match them by

new URL('https://datawrapper.dwcdn.net/WpAbK/2/').hostname

Any plan to port it to V4?

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

• Add Wikipedia Provider

Here is the diff that solved my problem:

diff --git a/node_modules/strapi-plugin-oembed/server/services/oembed.js b/node_modules/strapi-plugin-oembed/server/services/oembed.js
index 07f789d..0b634c4 100644
--- a/node_modules/strapi-plugin-oembed/server/services/oembed.js
+++ b/node_modules/strapi-plugin-oembed/server/services/oembed.js
@@ -16,7 +16,7 @@ module.exports = (
     async fetch(url) {
       let data;
 
-      const matches = url.match(/^(https?:\/\/)?(www\.)?(youtu\.be|youtube\.com|soundcloud\.com|vimeo\.com|tiktok\.com|open\.spotify\.com)/i);
+      const matches = url.match(/^(https?:\/\/)?(www\.)?(youtu\.be|youtube\.com|soundcloud\.com|vimeo\.com|tiktok\.com|open\.spotify\.com|([a-z]{2}\.)?wikipedia\.org)/i);
 
       if (matches) {
         try {
@@ -63,6 +63,29 @@ module.exports = (
               break;
           
             default:
+              if (matches[3].endsWith('.wikipedia.org')) {
+                const Host = matches[3];
+                const [baseUrl, pageTitle] = url.split('/wiki/');
+                const apiUrl = `${baseUrl}/w/api.php?format=json&action=query&prop=extracts%7Cpageimages&exintro=&explaintext=&titles=${pageTitle}`;
+
+                const apiData = await axios.get(apiUrl, {
+                  headers: {
+                    Host
+                  }
+                }).then(res => res.data);
+
+                fetchedData = Object.values(apiData.query.pages)?.[0];
+
+                if (!fetchedData) {
+                  throw new Error('No Wikipedia page found');
+                }
+
+                title = fetchedData.title;
+                mime = 'text/html';
+                thumbnail = fetchedData.thumbnail?.source;
+                break;
+              }
+
               break;
           }
             
@@ -75,6 +98,9 @@ module.exports = (
           }
           
         } catch (error) {
+          if (!error || !error.response) {
+            throw new Error(error);
+          }
           if (error.response.status === 404) {
             data = {
               error: 'This URL can\'t be found'

This issue body was partially generated by patch-package.

I just saw this plugin in my email, and it looks nices.

I think it would be amazing if we can see a preview of the embedded video on the panel itself.

What do you think?

Hi folks - I'm totally new to strapi and (maybe more problematic) Next JS. I've got the plugin installed and if I go into the article [slug.js] on the backend and add {article.oembed} the page renders all the vimeo video JSON data. But I'm at a loss for how to parse that data to just present the video iframe instead of the json. Can anyone point me in the right direction?

Thank you

"I encountered this error when attempting to display the thumbnail_url:

Is it related to a signature or something else? Because initially, when I first used this plugin, I could display the thumbnail_url. Any help would be greatly appreciated.

Hi, after following the configuration steps when I run "strapi develop" I get the following error message:

error TypeError: Invalid schema configuration: Oembedis not a valid type at pathoembed. See http://bit.ly/mongoose-schematypes for a list of valid schema types.

Node.js version: 15.0.1
npm version: 7.0.3
Strapi version: 3.1.4

Hey @nicolashmln ! Great plugin :) I love it and I'm using it with my site https://codewithahsan.dev
How can I programmatically update the oembed property for this plugin.
For example, I have a videoEmbedded property at my /api/posts endpoint.
Is there a way to provide it a youtube URL?

Thanks a bunch in advance 🎉

After manual installation of oembed, i can no longer use the "gui" interface to update component data.