Update

resources/js/projects-renderer/components/blocks/VideoBlock.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { computed } from 'vue';
+import { useIntersectionActivation } from '../../composables/useIntersectionActivation';
+import { getBunnyEmbedUrl, getFrameIoEmbedUrl, getYouTubeEmbedUrl } from '../../schema/projectSchema';
+
+const props = defineProps({
+    block: {
+        type: Object,
+        required: true,
+    },
+});
+
+const { isActive, target } = useIntersectionActivation();
+const youtubeUrl = computed(() => getYouTubeEmbedUrl(props.block?.media));
+const frameIoUrl = computed(() => getFrameIoEmbedUrl(props.block?.media?.url));
+const bunnyUrl = computed(() => getBunnyEmbedUrl(props.block?.media));
+</script>
+
+<template>
+    <section ref="target" class="block-video">
+        <iframe
+            v-if="block.media?.type === 'youtube' && isActive && youtubeUrl"
+            :src="youtubeUrl"
+            title="Project video block"
+            loading="lazy"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+        />
+
+        <iframe
+            v-else-if="block.media?.type === 'frameio' && isActive && frameIoUrl"
+            :src="frameIoUrl"
+            title="Project video block"
+            loading="lazy"
+            allow="autoplay; fullscreen; picture-in-picture"
+            allowfullscreen
+        />
+
+        <iframe
+            v-else-if="block.media?.type === 'bunny' && isActive && bunnyUrl"
+            :src="bunnyUrl"
+            title="Project video block"
+            loading="lazy"
+            style="border:0;position:absolute;top:0;height:100%;width:100%;"
+            allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture;"
+            allowfullscreen
+        />
+
+        <video
+            v-else-if="block.media?.type === 'video' && isActive && block.media?.url"
+            :autoplay="block.media?.autoplay === true"
+            :muted="block.media?.muted === true"
+            :loop="block.media?.loop === true"
+            controls
+            playsinline
+            preload="metadata"
+        >
+            <source :src="block.media.url">
+        </video>
+
+        <div v-else class="block-video__placeholder">Add a video block URL to render this row.</div>
+    </section>
+</template>
+
+<style scoped>
+.block-video {
+    aspect-ratio: 16 / 9;
+    background: linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(148, 163, 184, 0.15));
+    border-radius: 1.65rem;
+    overflow: hidden;
+}
+
+iframe,
+video {
+    border: 0;
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.block-video__placeholder {
+    align-items: center;
+    color: var(--project-muted, #6b7280);
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    padding: 2rem;
+    text-align: center;
+}
+</style>