Feature/bus 825 youtube video cms

components/cms/block/CmsBlockProductThreeColumn.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { Schemas } from '@shopware/api-client/api-types';
+
+const props = defineProps<{
+    block: Schemas['CmsBlock'];
+}>();
+
+const { getSlotContent } = useCmsBlock(props.block);
+
+const leftContent: Schemas['CmsSlot'] = getSlotContent('left');
+const centerContent: Schemas['CmsSlot'] = getSlotContent('center');
+const rightContent: Schemas['CmsSlot'] = getSlotContent('right');
+</script>
+
+<template>
+    <div class="grid gap-4 md:grid-cols-3">
+        <CmsLoader :content="leftContent" />
+        <CmsLoader :content="centerContent" />
+        <CmsLoader :content="rightContent" />
+    </div>
+</template>

components/cms/block/CmsBlockYoutubeVideo.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { Schemas } from '@shopware/api-client/api-types';
+const props = defineProps<{
+    block: Schemas['CmsBlock'];
+}>();
+const { getSlotContent } = useCmsBlock(props.block);
+const video: Schemas['CmsSlot'] = getSlotContent('video');
+</script>
+
+<template>
+    <CmsLoader :content="video" />
+</template>

components/cms/element/CmsElementProductBox.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { CmsElementProductBox } from '@shopware-pwa/composables-next';
+
+const props = defineProps<{
+    element: CmsElementProductBox;
+}>();
+
+const { product } = useProduct(props.element.data.product);
+</script>
+
+<template>
+    <ProductCard :product="product"></ProductCard>
+</template>

components/cms/element/CmsElementYoutubeVideo.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { CmsElementVimeoVideo } from '@shopware-pwa/composables-next';
+
+const props = defineProps<{
+    element: CmsElementVimeoVideo;
+}>();
+
+const youtubeVideo = ref(null);
+
+const videoId = props.element.config.videoID.value
+const videoUrl = computed(() => `https://www.youtube.com/embed/${videoId}`)
+</script>
+
+<template>
+    <div ref="youtubeVideo" class="my-0 mx-auto">
+        <div class="youtube-player h-full w-full relative ">
+            <iframe
+                :src="videoUrl"
+                frameborder="0"
+                class="w-full h-full absolute top-0 left-0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
+                allowfullscreen
+            ></iframe>
+        </div>
+    </div>
+</template>
+<style scoped>
+.youtube-player{
+    padding-bottom: 56.25%;
+}
+</style>