Update

resources/views/pages/partials/project-slot.blade.php

@@ -0,0 +1,63 @@
+{{--
+  Renders a single project slot: image, text, video (youtube/bunny/frameio/mp4).
+  Expected $slot shape:
+    type  : 'image' | 'text' | 'video'
+    image : ['url' => string, 'alt' => string]
+    media : ['type' => string, 'url' => string, 'embedUrl' => string] | null
+--}}
+@php
+  $stretch = $stretch ?? false;
+  $squareEmbed = $squareEmbed ?? false;
+  $slotType = $slot['type'] ?? '';
+@endphp
+
+@if($slotType === 'image' && !empty($slot['image']['url']))
+
+  <div @class(['project-slot', 'project-slot--image', 'project-slot--stretch' => $stretch])>
+    <img class="project-slot__image" src="{{ $slot['image']['url'] }}" alt="{{ $slot['image']['alt'] ?? '' }}">
+  </div>
+
+@elseif($slotType === 'text' && trim(strip_tags((string) ($slot['text'] ?? ''))) !== '')
+
+  <div @class(['project-slot', 'project-slot--text', 'project-slot--stretch' => $stretch, 'd-flex' => true, 'align-items-center' => true])>
+    <div class="project-slot__text col-12 col-lg-8 offset-lg-2">
+      <div class="text-center w-100">
+        {!! $slot['text'] !!}
+      </div>
+    </div>
+  </div>
+
+@elseif($slotType === 'video' && !empty($slot['media']))
+  @php $media = $slot['media']; @endphp
+
+  <div @class(['project-slot', 'project-slot--video', 'project-slot--stretch' => $stretch])>
+    @if(in_array($media['type'], ['youtube', 'bunny', 'frameio']) && !empty($media['embedUrl']))
+      <div class="project-slot__embed">
+        <iframe
+          class="project-slot__iframe"
+          src="{!! $media['embedUrl'] !!}"
+          frameborder="0"
+          @if(!empty($media['autoplay']))
+          style="width: 100%;{{ $squareEmbed ? ' aspect-ratio: 1/1;' : ' aspect-ratio: 16/9;' }};pointer-events:none;"
+          @else
+          style="width: 100%;{{ $squareEmbed ? ' aspect-ratio: 1/1;' : ' aspect-ratio: 16/9;' }}"
+          @endif
+          allow="autoplay; fullscreen; picture-in-picture"
+          allowfullscreen>
+        </iframe>
+      </div>
+
+    @elseif($media['type'] === 'video' && !empty($media['url']))
+      <video
+        class="project-video project-slot__video"
+        @if(!empty($media['autoplay'])) autoplay @endif
+        @if(!empty($media['muted'])) muted @endif
+        @if(!empty($media['loop'])) loop @endif
+        playsinline>
+        <source src="{{ $media['url'] }}" type="video/mp4">
+      </video>
+
+    @endif
+    </div>
+
+@endif