From 5a17a47514646c916cb0227d5f1028c1a846163d Mon Sep 17 00:00:00 2001
From: nicwands <wands.nic@gmail.com>
Date: Mon, 29 Jun 2026 14:45:44 -0400
Subject: [PATCH] at video embed

---
 src/components.d.ts                     |  1 +
 src/components/strapi/EmbeddedVideo.vue | 37 +++++++++++++++++++++++++
 src/components/strapi/Map.vue           |  4 +++
 3 files changed, 42 insertions(+)
 create mode 100644 src/components/strapi/EmbeddedVideo.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index a362462..1302b32 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -25,6 +25,7 @@ declare module 'vue' {
     StrapiContent: typeof import('./components/strapi/Content.vue')['default']
     StrapiCopy: typeof import('./components/strapi/Copy.vue')['default']
     StrapiDiptych: typeof import('./components/strapi/Diptych.vue')['default']
+    StrapiEmbeddedVideo: typeof import('./components/strapi/EmbeddedVideo.vue')['default']
     StrapiLink: typeof import('./components/strapi/Link.vue')['default']
     StrapiMap: typeof import('./components/strapi/Map.vue')['default']
     StrapiMedia: typeof import('./components/strapi/Media.vue')['default']
diff --git a/src/components/strapi/EmbeddedVideo.vue b/src/components/strapi/EmbeddedVideo.vue
new file mode 100644
index 0000000..19ff233
--- /dev/null
+++ b/src/components/strapi/EmbeddedVideo.vue
@@ -0,0 +1,37 @@
+<template>
+    <section v-if="video" class="strapi-embedded-video">
+        <div class="wrapper" v-html="video.oembed.html" />
+    </section>
+</template>
+
+<script setup>
+const props = defineProps({
+    video: Object,
+})
+</script>
+
+<style lang="scss">
+.strapi-embedded-video {
+    .wrapper {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        position: relative;
+        border-radius: desktop-vw(4px);
+        overflow: hidden;
+
+        iframe {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    }
+
+    @include mobile() {
+        .wrapper {
+            border-radius: mobile-vw(8px);
+        }
+    }
+}
+</style>
diff --git a/src/components/strapi/Map.vue b/src/components/strapi/Map.vue
index 74f37d1..04d7e13 100644
--- a/src/components/strapi/Map.vue
+++ b/src/components/strapi/Map.vue
@@ -13,12 +13,14 @@
 <script setup>
 import Copy from './Copy.vue'
 import Diptych from './Diptych.vue'
+import EmbeddedVideo from './EmbeddedVideo.vue'
 import Media from './Media.vue'
 
 const MAP = {
     'global.copy': Copy,
     'global.media': Media,
     'global.dipytch': Diptych,
+    'global.embedded-video': EmbeddedVideo,
 }
 
 const props = defineProps({
@@ -26,6 +28,8 @@ const props = defineProps({
     mediaDS: String,
     mediaMS: String,
 })
+
+console.log(props.items)
 </script>
 
 <style lang="scss">