add video embed

config/plugins.ts

@@ -28,6 +28,9 @@ const config = ({
       },
     },
   },
+  oembed: {
+    enabled: true,
+  },
 });
 
 export default config;

package.json

@@ -25,6 +25,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.0.0",
+    "strapi-plugin-oembed": "^2.0.2",
     "strapi-v5-plugin-populate-deep": "^4.3.2",
     "styled-components": "^6.0.0"
   },

src/api/mosaic-item/content-types/mosaic-item/schema.json

@@ -40,7 +40,8 @@
       "components": [
         "global.copy",
         "global.media",
-        "global.dipytch"
+        "global.dipytch",
+        "global.embedded-video"
       ]
     }
   }

src/components/global/embedded-video.json

@@ -0,0 +1,15 @@
+{
+  "collectionName": "components_global_embedded_videos",
+  "info": {
+    "displayName": "Embedded Video",
+    "icon": "cast"
+  },
+  "options": {},
+  "attributes": {
+    "video": {
+      "type": "customField",
+      "customField": "plugin::oembed.oembed"
+    }
+  },
+  "config": {}
+}

types/generated/components.d.ts

@@ -35,6 +35,18 @@ export interface GlobalDipytch extends Struct.ComponentSchema {
   };
 }
 
+export interface GlobalEmbeddedVideo extends Struct.ComponentSchema {
+  collectionName: 'components_global_embedded_videos';
+  info: {
+    displayName: 'Embedded Video';
+    icon: 'cast';
+  };
+  attributes: {
+    video: Schema.Attribute.JSON &
+      Schema.Attribute.CustomField<'plugin::oembed.oembed'>;
+  };
+}
+
 export interface GlobalLink extends Struct.ComponentSchema {
   collectionName: 'components_global_links';
   info: {
@@ -79,6 +91,7 @@ declare module '@strapi/strapi' {
       'global.copy': GlobalCopy;
       'global.descriptive-list': GlobalDescriptiveList;
       'global.dipytch': GlobalDipytch;
+      'global.embedded-video': GlobalEmbeddedVideo;
       'global.link': GlobalLink;
       'global.media': GlobalMedia;
       'global.seo': GlobalSeo;

types/generated/contentTypes.d.ts

@@ -486,7 +486,7 @@ export interface ApiMosaicItemMosaicItem extends Struct.CollectionTypeSchema {
   };
   attributes: {
     content: Schema.Attribute.DynamicZone<
-      ['global.copy', 'global.media', 'global.dipytch']
+      ['global.copy', 'global.media', 'global.dipytch', 'global.embedded-video']
     >;
     createdAt: Schema.Attribute.DateTime;
     createdBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &