at video embed

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']

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>

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">