@duffcloudservices/cms 0.10.0 → 0.11.0

package/src/components/LiteMediaEmbed.test.ts

@@ -0,0 +1,229 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import LiteMediaEmbed from './LiteMediaEmbed.vue'
+
+const YT_URL = 'https://www.youtube.com/watch?v=vz7F8bc1QQ0'
+const YT_ID = 'vz7F8bc1QQ0'
+const IG_URL = 'https://www.instagram.com/p/AbCdEfGhIjK/'
+
+describe('LiteMediaEmbed — YouTube facade', () => {
+  it('renders the poster (thumbnail + play button) and NO iframe initially', () => {
+    const wrapper = mount(LiteMediaEmbed, {
+      props: { url: YT_URL, type: 'youtube', alt: 'Reindeer Dash 2025' },
+    })
+
+    // No heavy iframe until the user asks for it.
+    expect(wrapper.find('iframe').exists()).toBe(false)
+
+    // Poster = the documented YouTube thumbnail for the video id.
+    const poster = wrapper.find('img.dcs-lite-embed__poster')
+    expect(poster.exists()).toBe(true)
+    expect(poster.attributes('src')).toBe(
+      `https://img.youtube.com/vi/${YT_ID}/hqdefault.jpg`,
+    )
+    expect(poster.attributes('loading')).toBe('lazy')
+
+    // Accessible, keyboard-operable play affordance.
+    const button = wrapper.find('button.dcs-lite-embed__button')
+    expect(button.exists()).toBe(true)
+    expect(button.attributes('type')).toBe('button')
+    expect(button.attributes('aria-label')).toBe('Play video: Reindeer Dash 2025')
+  })
+
+  it('injects the real nocookie autoplay iframe on click and drops the poster button', async () => {
+    const wrapper = mount(LiteMediaEmbed, {
+      props: { url: YT_URL, type: 'youtube', alt: 'Reindeer Dash 2025' },
+    })
+
+    await wrapper.find('button.dcs-lite-embed__button').trigger('click')
+
+    const iframe = wrapper.find('iframe.dcs-lite-embed__frame')
+    expect(iframe.exists()).toBe(true)
+    expect(iframe.attributes('src')).toBe(
+      `https://www.youtube-nocookie.com/embed/${YT_ID}?rel=0&autoplay=1&playsinline=1`,
+    )
+    expect(iframe.attributes('allow')).toContain('autoplay')
+    expect(iframe.attributes('title')).toBe('Reindeer Dash 2025')
+
+    // The poster button is gone once the iframe is live.
+    expect(wrapper.find('button.dcs-lite-embed__button').exists()).toBe(false)
+  })
+
+  it('activates via keyboard (Enter on the play button)', async () => {
+    const wrapper = mount(LiteMediaEmbed, {
+      props: { url: YT_URL, type: 'youtube', alt: 'Reindeer Dash 2025' },
+    })
+
+    expect(wrapper.find('iframe').exists()).toBe(false)
+
+    await wrapper.find('button.dcs-lite-embed__button').trigger('keydown.enter')
+
+    expect(wrapper.find('iframe.dcs-lite-embed__frame').exists()).toBe(true)
+  })
+
+  it('activates via keyboard (Space on the play button)', async () => {
+    const wrapper = mount(LiteMediaEmbed, {
+      props: { url: YT_URL, type: 'youtube' },
+    })
+
+    await wrapper.find('button.dcs-lite-embed__button').trigger('keydown.space')
+
+    expect(wrapper.find('iframe.dcs-lite-embed__frame').exists()).toBe(true)
+  })
+
+  it('accepts a bare 11-char video id', () => {
+    const wrapper = mount(LiteMediaEmbed, {
+      props: { url: YT_ID, type: 'youtube' },
+    })
+
+    expect(wrapper.find('img.dcs-lite-embed__poster').attributes('src')).toBe(
+      `https://img.youtube.com/vi/${YT_ID}/hqdefault.jpg`,
+    )
+  })
+})
+
+describe('LiteMediaEmbed — Instagram facade', () => {
+  it('renders a branded glyph poster (no hotlinked thumbnail) and no iframe initially', () => {
+    const wrapper = mount(LiteMediaEmbed, {
+      props: { url: IG_URL, type: 'instagram', alt: 'Latest reel' },
+    })
+
+    expect(wrapper.find('iframe').exists()).toBe(false)
+    // No image is hotlinked; a branded poster stands in.
+    expect(wrapper.find('img.dcs-lite-embed__poster').exists()).toBe(false)
+    expect(wrapper.find('.dcs-lite-embed__poster--brand').exists()).toBe(true)
+    expect(wrapper.find('button.dcs-lite-embed__button').attributes('aria-label')).toBe(
+      'Load Instagram post: Latest reel',
+    )
+  })
+
+  it('uses a caller-supplied poster override when present', () => {
+    const wrapper = mount(LiteMediaEmbed, {
+      props: {
+        url: IG_URL,
+        type: 'instagram',
+        poster: 'https://files.duffcloudservices.com/kdh/assets/ig-cover.webp',
+      },
+    })
+
+    const poster = wrapper.find('img.dcs-lite-embed__poster')
+    expect(poster.exists()).toBe(true)
+    expect(poster.attributes('src')).toBe(
+      'https://files.duffcloudservices.com/kdh/assets/ig-cover.webp',
+    )
+  })
+
+  it('injects the /embed/ iframe on activation', async () => {
+    const wrapper = mount(LiteMediaEmbed, {
+      props: { url: IG_URL, type: 'instagram' },
+    })
+
+    await wrapper.find('button.dcs-lite-embed__button').trigger('click')
+
+    const iframe = wrapper.find('iframe.dcs-lite-embed__frame')
+    expect(iframe.exists()).toBe(true)
+    expect(iframe.attributes('src')).toBe('https://www.instagram.com/p/AbCdEfGhIjK/embed/')
+  })
+})
+
+describe('LiteMediaEmbed — hostile url never reaches the iframe src (no CSP backstop on customer sites)', () => {
+  // A portal-editable / visual-editor-AI-controlled carousel `url` must never be
+  // passed verbatim into <iframe src>. Invalid/hostile urls fall through to the
+  // safe default slot rather than rendering a facade over an untrusted iframe.
+  // These produce NO renderable embed at all (invalid scheme/host) → the
+  // component renders nothing (no facade button, no media <img> carrying the url).
+  const inert = [
+    { type: 'youtube', url: 'javascript:alert(document.domain)' },
+    { type: 'instagram', url: 'javascript:alert(1)//' },
+    { type: 'instagram', url: 'https://evil.com/x' },
+    { type: 'instagram', url: 'data:text/html,<script>alert(1)</script>' },
+    { type: 'instagram', url: 'http://www.instagram.com/p/AbCdEfGhIjK/' }, // non-https
+    { type: 'instagram', url: 'https://instagram.com.evil.com/p/x/' }, // lookalike host
+  ] as const
+
+  for (const { type, url } of inert) {
+    it(`renders nothing (no button, no iframe, no leaked url) for ${type} url ${url}`, () => {
+      const wrapper = mount(LiteMediaEmbed, { props: { url, type } })
+
+      expect(wrapper.find('button.dcs-lite-embed__button').exists()).toBe(false)
+      expect(wrapper.find('iframe').exists()).toBe(false)
+      // The untrusted url is never emitted into any attribute (no broken <img src>).
+      expect(wrapper.html()).not.toContain('javascript:')
+      expect(wrapper.html()).not.toContain('evil.com')
+      expect(wrapper.html()).not.toContain('data:text/html')
+    })
+  }
+
+  it('extracts an id from a ?v= param on any host but only ever embeds via youtube-nocookie (never the source host)', async () => {
+    // extractYouTubeId pulls the sanitised 11-char id; the host is discarded, so
+    // the iframe origin is always the hardcoded youtube-nocookie, never evil.com.
+    const wrapper = mount(LiteMediaEmbed, {
+      props: { url: 'https://evil.com/watch?v=notArealID1', type: 'youtube' },
+    })
+    await wrapper.find('button.dcs-lite-embed__button').trigger('click')
+    const src = wrapper.find('iframe.dcs-lite-embed__frame').attributes('src') ?? ''
+    expect(src.startsWith('https://www.youtube-nocookie.com/embed/notArealID1')).toBe(true)
+    expect(wrapper.html()).not.toContain('evil.com')
+  })
+
+  it('accepts a legitimate www.instagram.com url and rebuilds a clean /embed/ src', async () => {
+    const wrapper = mount(LiteMediaEmbed, {
+      props: { url: 'https://www.instagram.com/p/AbCdEfGhIjK/?igshid=abc#frag', type: 'instagram' },
+    })
+    await wrapper.find('button.dcs-lite-embed__button').trigger('click')
+    // Query/fragment/userinfo are dropped — only host + path survive the rebuild.
+    expect(wrapper.find('iframe.dcs-lite-embed__frame').attributes('src')).toBe(
+      'https://www.instagram.com/p/AbCdEfGhIjK/embed/',
+    )
+  })
+})
+
+describe('LiteMediaEmbed — non-embed types fall through to existing behavior', () => {
+  it('renders a plain <img> for image type (no facade button, no iframe)', () => {
+    const wrapper = mount(LiteMediaEmbed, {
+      props: { url: '/images/staff/kim.webp', type: 'image', alt: 'Kim Duff' },
+    })
+
+    expect(wrapper.find('button.dcs-lite-embed__button').exists()).toBe(false)
+    expect(wrapper.find('iframe').exists()).toBe(false)
+
+    const img = wrapper.find('img.dcs-lite-embed__media')
+    expect(img.exists()).toBe(true)
+    expect(img.attributes('src')).toBe('/images/staff/kim.webp')
+    expect(img.attributes('alt')).toBe('Kim Duff')
+  })
+
+  it('renders a <video> for video type', () => {
+    const wrapper = mount(LiteMediaEmbed, {
+      props: { url: '/videos/intro.mp4', type: 'video', alt: 'Intro' },
+    })
+
+    expect(wrapper.find('button.dcs-lite-embed__button').exists()).toBe(false)
+    const video = wrapper.find('video.dcs-lite-embed__media')
+    expect(video.exists()).toBe(true)
+    expect(video.attributes('src')).toBe('/videos/intro.mp4')
+    expect(video.attributes('controls')).toBeDefined()
+  })
+
+  it('falls through to a plain <img> for an unknown type', () => {
+    const wrapper = mount(LiteMediaEmbed, {
+      // Deliberately outside the documented union.
+      props: { url: '/whatever.png', type: 'gif' as never },
+    })
+
+    expect(wrapper.find('button.dcs-lite-embed__button').exists()).toBe(false)
+    expect(wrapper.find('iframe').exists()).toBe(false)
+    expect(wrapper.find('img.dcs-lite-embed__media').attributes('src')).toBe('/whatever.png')
+  })
+
+  it('lets a consumer override non-embed rendering via the default slot', () => {
+    const wrapper = mount(LiteMediaEmbed, {
+      props: { url: '/images/staff/kim.webp', type: 'image', alt: 'Kim Duff' },
+      slots: { default: '<figure class="custom-fallback">custom</figure>' },
+    })
+
+    expect(wrapper.find('figure.custom-fallback').exists()).toBe(true)
+    // The built-in default is replaced by slot content.
+    expect(wrapper.find('img.dcs-lite-embed__media').exists()).toBe(false)
+  })
+})

package/src/components/LiteMediaEmbed.vue

@@ -0,0 +1,399 @@
+<script setup lang="ts">
+/**
+ * LiteMediaEmbed
+ *
+ * Click-to-load facade for `useMediaCarousel` embed media types (`youtube`,
+ * `instagram`). The poster state is the thumbnail plus an accessible play
+ * affordance; the real (heavy) `<iframe>` is injected only on user interaction.
+ * This defers the full YouTube/Instagram player payload (~0.8 MB of script for
+ * the YouTube player alone) until a visitor actually chooses to watch, and is
+ * the default renderer for future editor video embeds.
+ *
+ * Non-embed types (`image`, `video`, or anything unknown) fall through to the
+ * default `<slot>` — which itself defaults to a plain `<img>`/`<video>` — so a
+ * carousel can hand every item to this one component.
+ *
+ * SSR-safe (VitePress SSG/SSR): no `window`/`document` access at setup, the
+ * poster renders server-side, and the poster/iframe swap is a pure `ref` flip
+ * that only happens after a client-side user gesture, so server and client
+ * markup match on hydration.
+ *
+ * @example
+ * ```vue
+ * <LiteMediaEmbed
+ *   :url="item.url"
+ *   :type="item.type"
+ *   :alt="item.alt"
+ * />
+ * ```
+ */
+import { computed, ref } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /**
+   * Media source. For `youtube`: a watch/embed/short URL or a bare 11-char id.
+   * For `instagram`: the post/reel URL. For `image`/`video`: the asset URL.
+   */
+  url: string
+  /**
+   * Media type. `youtube`/`instagram` get the click-to-load facade; everything
+   * else falls through to the default slot (plain `<img>`/`<video>`).
+   */
+  type: 'image' | 'video' | 'youtube' | 'instagram' | (string & {})
+  /** Accessible label / alt text for the media. */
+  alt?: string
+  /**
+   * Optional poster image override. Required for a real Instagram thumbnail
+   * (Instagram exposes no documented thumbnail endpoint — without an override
+   * Instagram renders a branded glyph poster rather than hotlinking one).
+   */
+  poster?: string
+  /**
+   * CSS `aspect-ratio` for the reserved box. Poster and iframe share this exact
+   * box so activation causes no layout shift. Defaults to widescreen video.
+   */
+  aspectRatio?: string
+}>(), {
+  alt: '',
+  poster: '',
+  aspectRatio: '16 / 9',
+})
+
+const activated = ref(false)
+
+/** Types this component owns as click-to-load embeds (vs pass-through media). */
+const isEmbedType = computed(() => props.type === 'youtube' || props.type === 'instagram')
+
+// A route is only rendered as a click-to-load facade when it is a youtube/
+// instagram type AND yields a trusted embed URL. An embed type whose url is
+// unrecognised or hostile renders NOTHING (see the template's media fallback,
+// which is gated to non-embed types) — never a broken <img src="javascript:…">
+// nor a facade wrapping an untrusted iframe.
+const isEmbed = computed(() => isEmbedType.value && embedSrc.value !== '')
+
+/**
+ * Extract a YouTube video id from a watch URL, embed URL, short URL, or a bare
+ * 11-character id. Returns '' when nothing usable is found.
+ */
+function extractYouTubeId(url: string): string {
+  const embedMatch = url.match(/\/embed\/([\w-]{11})/)
+  if (embedMatch) return embedMatch[1]
+
+  const watchMatch = url.match(/[?&]v=([\w-]{11})/)
+  if (watchMatch) return watchMatch[1]
+
+  const shortMatch = url.match(/youtu\.be\/([\w-]{11})/)
+  if (shortMatch) return shortMatch[1]
+
+  if (/^[\w-]{11}$/.test(url)) return url
+  return ''
+}
+
+const youTubeId = computed(() => (props.type === 'youtube' ? extractYouTubeId(props.url) : ''))
+
+/**
+ * Build an Instagram embed URL from a caller-supplied post URL, rebuilt from the
+ * parsed host + path so nothing untrusted (userinfo, query, fragment, a foreign
+ * host, or a `javascript:`/`data:` scheme) can reach the iframe `src`. Returns
+ * '' for anything that is not an `https://…instagram.com/…` URL.
+ */
+function instagramEmbed(rawUrl: string): string {
+  let parsed: URL
+  try {
+    parsed = new URL(rawUrl)
+  } catch {
+    return ''
+  }
+  if (parsed.protocol !== 'https:') return ''
+  const host = parsed.hostname.toLowerCase()
+  if (host !== 'instagram.com' && !host.endsWith('.instagram.com')) return ''
+  const path = parsed.pathname.replace(/\/embed\/?$/, '').replace(/\/$/, '')
+  return `https://${host}${path}/embed/`
+}
+
+/**
+ * Poster image URL for the facade. YouTube uses the documented thumbnail
+ * pattern (`hqdefault.jpg` always exists for a valid id); Instagram uses the
+ * caller-supplied override or none (branded glyph poster).
+ */
+const posterSrc = computed(() => {
+  if (props.poster) return props.poster
+  if (props.type === 'youtube' && youTubeId.value) {
+    return `https://img.youtube.com/vi/${youTubeId.value}/hqdefault.jpg`
+  }
+  return ''
+})
+
+/**
+ * Real embed URL, only ever used after activation. Only ever a trusted
+ * youtube-nocookie / instagram.com URL, or '' — a portal/AI-controlled `url`
+ * is never passed through verbatim (no `javascript:`/`data:`/foreign-origin
+ * iframe sink; there is no CSP backstop on customer sites).
+ */
+const embedSrc = computed(() => {
+  if (props.type === 'youtube') {
+    // Privacy-preserving nocookie host + autoplay so one click = playing.
+    return youTubeId.value
+      ? `https://www.youtube-nocookie.com/embed/${youTubeId.value}?rel=0&autoplay=1&playsinline=1`
+      : ''
+  }
+  if (props.type === 'instagram') {
+    return instagramEmbed(props.url)
+  }
+  return ''
+})
+
+const iframeTitle = computed(() => {
+  if (props.alt) return props.alt
+  return props.type === 'youtube' ? 'YouTube video' : 'Instagram post'
+})
+
+const iframeAllow = computed(() =>
+  props.type === 'youtube'
+    ? 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+    : 'encrypted-media; picture-in-picture',
+)
+
+const playLabel = computed(() => {
+  const subject = props.alt?.trim()
+  if (props.type === 'youtube') {
+    return subject ? `Play video: ${subject}` : 'Play video'
+  }
+  return subject ? `Load Instagram post: ${subject}` : 'Load Instagram post'
+})
+
+function activate() {
+  activated.value = true
+}
+</script>
+
+<template>
+  <div
+    class="dcs-lite-embed"
+    :class="{ 'dcs-lite-embed--embed': isEmbed }"
+    :style="{ aspectRatio }"
+    :data-dcs-lite-embed="type"
+  >
+    <template v-if="isEmbed">
+      <iframe
+        v-if="activated && embedSrc"
+        class="dcs-lite-embed__frame"
+        :src="embedSrc"
+        :title="iframeTitle"
+        :allow="iframeAllow"
+        allowfullscreen
+        loading="lazy"
+      />
+      <button
+        v-else
+        type="button"
+        class="dcs-lite-embed__button"
+        :aria-label="playLabel"
+        @click="activate"
+        @keydown.enter.prevent="activate"
+        @keydown.space.prevent="activate"
+      >
+        <img
+          v-if="posterSrc"
+          class="dcs-lite-embed__poster"
+          :src="posterSrc"
+          :alt="alt"
+          loading="lazy"
+          decoding="async"
+        >
+        <span
+          v-else
+          class="dcs-lite-embed__poster dcs-lite-embed__poster--brand"
+          :class="`dcs-lite-embed__poster--${type}`"
+          aria-hidden="true"
+        >
+          <svg
+            v-if="type === 'instagram'"
+            class="dcs-lite-embed__brand-glyph"
+            viewBox="0 0 24 24"
+            width="56"
+            height="56"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect x="2" y="2" width="20" height="20" rx="5" />
+            <circle cx="12" cy="12" r="4" />
+            <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
+          </svg>
+        </span>
+
+        <span class="dcs-lite-embed__scrim" aria-hidden="true" />
+
+        <span class="dcs-lite-embed__play" aria-hidden="true">
+          <svg
+            v-if="type === 'instagram'"
+            class="dcs-lite-embed__play-icon"
+            viewBox="0 0 24 24"
+            width="30"
+            height="30"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect x="3" y="3" width="18" height="18" rx="5" />
+            <circle cx="12" cy="12" r="3.5" />
+            <circle cx="17.5" cy="6.5" r="1.1" fill="currentColor" stroke="none" />
+          </svg>
+          <svg
+            v-else
+            class="dcs-lite-embed__play-icon"
+            viewBox="0 0 24 24"
+            width="30"
+            height="30"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path d="M8 5.14v13.72a1 1 0 0 0 1.54.84l10.29-6.86a1 1 0 0 0 0-1.68L9.54 4.3A1 1 0 0 0 8 5.14z" />
+          </svg>
+        </span>
+      </button>
+    </template>
+
+    <slot v-else>
+      <video
+        v-if="type === 'video'"
+        class="dcs-lite-embed__media"
+        :src="url"
+        :aria-label="alt || undefined"
+        controls
+        preload="metadata"
+      />
+      <!-- Media fallback is for genuine media types only. An embed type that
+           reached here failed url validation → render nothing, never a broken
+           <img> carrying the untrusted url. -->
+      <img
+        v-else-if="!isEmbedType"
+        class="dcs-lite-embed__media"
+        :src="url"
+        :alt="alt"
+        loading="lazy"
+      >
+    </slot>
+  </div>
+</template>
+
+<style scoped>
+.dcs-lite-embed {
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  aspect-ratio: var(--dcs-lite-embed-aspect, 16 / 9);
+  background: var(--dcs-lite-embed-bg, #0b1220);
+}
+
+.dcs-lite-embed__frame,
+.dcs-lite-embed__media,
+.dcs-lite-embed__poster {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.dcs-lite-embed__media,
+.dcs-lite-embed__poster {
+  object-fit: cover;
+}
+
+.dcs-lite-embed__button {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  background: transparent;
+  color: #ffffff;
+  display: block;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Branded fallback poster (Instagram has no documented thumbnail endpoint). */
+.dcs-lite-embed__poster--brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.dcs-lite-embed__poster--instagram {
+  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
+}
+
+.dcs-lite-embed__scrim {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(2, 6, 23, 0.35) 0%, rgba(2, 6, 23, 0) 45%);
+  opacity: 0.55;
+  transition: opacity var(--motion-duration-sm, 160ms) var(--motion-ease-standard, ease);
+}
+
+.dcs-lite-embed__play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4.25rem;
+  height: 4.25rem;
+  transform: translate(-50%, -50%);
+  border-radius: 9999px;
+  background: var(--dcs-lite-embed-play-bg, rgba(15, 23, 42, 0.72));
+  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.35);
+  transition:
+    transform var(--motion-duration-sm, 160ms) var(--motion-ease-standard, ease),
+    background var(--motion-duration-sm, 160ms) var(--motion-ease-standard, ease);
+}
+
+.dcs-lite-embed__play-icon {
+  transform: translateX(1px);
+  color: #ffffff;
+}
+
+.dcs-lite-embed--embed[data-dcs-lite-embed='instagram'] .dcs-lite-embed__play {
+  background: var(--dcs-lite-embed-play-bg, rgba(15, 23, 42, 0.55));
+}
+
+.dcs-lite-embed__button:hover .dcs-lite-embed__play,
+.dcs-lite-embed__button:focus-visible .dcs-lite-embed__play {
+  transform: translate(-50%, -50%) scale(1.06);
+  background: var(--dcs-lite-embed-play-bg-hover, #ef4444);
+}
+
+.dcs-lite-embed__button:hover .dcs-lite-embed__scrim,
+.dcs-lite-embed__button:focus-visible .dcs-lite-embed__scrim {
+  opacity: 0.85;
+}
+
+.dcs-lite-embed__button:focus-visible {
+  outline: 3px solid var(--dcs-lite-embed-focus, #60a5fa);
+  outline-offset: -3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dcs-lite-embed__scrim,
+  .dcs-lite-embed__play {
+    transition: none;
+  }
+
+  .dcs-lite-embed__button:hover .dcs-lite-embed__play,
+  .dcs-lite-embed__button:focus-visible .dcs-lite-embed__play {
+    transform: translate(-50%, -50%);
+  }
+}
+</style>

package/src/composables/useMediaCarousel.ts

@@ -45,7 +45,12 @@ import { isCdnAssetUrl } from '@duffcloudservices/cms-core'
 export interface MediaCarouselItem {
   /** URL to the image, video file, or embed URL */
   url: string
-  /** Type of media: 'image', 'video' (direct file), 'youtube', or 'instagram' */
+  /**
+   * Type of media: 'image', 'video' (direct file), 'youtube', or 'instagram'.
+   * Render `youtube`/`instagram` items through the click-to-load facade
+   * `LiteMediaEmbed` (`@duffcloudservices/cms/lite-media-embed`) so the heavy
+   * player iframe loads only on user interaction — never eagerly.
+   */
   type: 'image' | 'video' | 'youtube' | 'instagram'
   /** Accessibility alt text */
   alt?: string