diff --git a/app/components/FAQSection.vue b/app/components/FAQSection.vue
index 28711db..1ef1c1e 100644
--- a/app/components/FAQSection.vue
+++ b/app/components/FAQSection.vue
@@ -32,6 +32,10 @@ watchEffect(() => {
     panel.value = faqs.value[0].id
   }
 })
+
+function selectPanel(section) {
+  panel.value = section
+}
 </script>
 
 <style scoped>
diff --git a/app/components/VideoCustomerStories.vue b/app/components/VideoCustomerStories.vue
new file mode 100644
index 0000000..a7a66f2
--- /dev/null
+++ b/app/components/VideoCustomerStories.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="stories-section">
+    <div v-if="pending" class="stories-status">Loading customer stories…</div>
+
+    <div v-else-if="!stories?.length" class="stories-status">
+      No customer stories available yet.
+    </div>
+
+    <div v-else class="stories-grid">
+      <VideoCustomerStory
+        v-for="story in stories"
+        :key="story.title"
+        :slug="story.stem.split('/').at(-1)"
+        class="stories-grid__item"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const { locale } = useI18n()
+
+// Assumes a plural counterpart to useVideoCustomerStory that returns
+// a list of { slug, ... } entries. Rename to match your actual composable.
+const { queryVideoCustomerStories } = useVideoCustomerStories(locale)
+
+const { data: stories, pending } = await useAsyncData(
+  `video-customer-stories-${locale.value}`,
+  queryVideoCustomerStories,
+  { watch: [locale] }
+)
+</script>
+
+<style scoped>
+.stories-section {
+  width: 100%;
+}
+
+.stories-status {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.stories-grid {
+  --gap: 2rem;
+  --cols: 3;
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--gap);
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+
+.stories-grid__item {
+  aspect-ratio: 9 / 16;
+  /* 3 per line max: subtract gap share, cap width so items don't grow past that */
+  flex: 1 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
+  max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
+}
+
+@media (max-width: 900px) {
+  .stories-grid {
+    --cols: 2;
+  }
+}
+
+@media (max-width: 480px) {
+  .stories-grid {
+    --cols: 1;
+    padding: 1.5rem 1rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/app/components/VideoCustomerStory.vue b/app/components/VideoCustomerStory.vue
new file mode 100644
index 0000000..4d391f9
--- /dev/null
+++ b/app/components/VideoCustomerStory.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="video-wrapper">
+    <iframe
+      ref="playerRef"
+      class="video-iframe"
+      :src="videoUrl"
+      title="YouTube video player"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+    ></iframe>
+
+    <button
+      class="play-pause-overlay"
+      type="button"
+      :aria-label="isPlaying ? 'Pause video' : 'Play video'"
+      @click="togglePlay"
+    >
+      <svg v-if="!isPlaying" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
+      <svg v-else viewBox="0 0 24 24"><path d="M6 5h4v14H6zM14 5h4v14h-4z" /></svg>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  slug: String
+})
+
+const { locale } = useI18n()
+const slug = computed(() => props.slug)
+
+const { queryVideoCustomerStory } = useVideoCustomerStory(slug, locale)
+
+const { data: customerStory } = await useAsyncData(
+  `video-customer-story-${locale.value}-${slug.value}`,
+  queryVideoCustomerStory,
+  { watch: [locale, slug] }
+)
+
+const playerRef = ref(null)
+const isPlaying = ref(false)
+
+// Build the embed URL with controls hidden and the JS API enabled
+const videoUrl = computed(() => {
+  const rawUrl = customerStory.value?.meta?.url
+  if (!rawUrl) return ''
+  const url = new URL(rawUrl)
+  url.searchParams.set('controls', '0')
+  url.searchParams.set('enablejsapi', '1')
+  url.searchParams.set('modestbranding', '1')
+  url.searchParams.set('playsinline', '1')
+  url.searchParams.set('rel', '0')
+  if (typeof window !== 'undefined') {
+    // required for the postMessage API to work reliably
+    url.searchParams.set('origin', window.location.origin)
+  }
+  return url.toString()
+})
+
+function postCommand(func) {
+  playerRef.value?.contentWindow?.postMessage(
+    JSON.stringify({ event: 'command', func, args: [] }),
+    '*'
+  )
+}
+
+function togglePlay() {
+  postCommand(isPlaying.value ? 'pauseVideo' : 'playVideo')
+  isPlaying.value = !isPlaying.value
+}
+
+// Keep the button state in sync with actual player state
+function handleMessage(event) {
+  if (typeof event.data !== 'string') return
+  try {
+    const data = JSON.parse(event.data)
+    if (data.event === 'infoDelivery' && typeof data.info?.playerState === 'number') {
+      // 1 = playing, 2 = paused, 0 = ended
+      if (data.info.playerState === 1) isPlaying.value = true
+      else if (data.info.playerState === 2 || data.info.playerState === 0) isPlaying.value = false
+    }
+  } catch {
+    // ignore non-JSON messages from other sources
+  }
+}
+
+onMounted(() => window.addEventListener('message', handleMessage))
+onBeforeUnmount(() => window.removeEventListener('message', handleMessage))
+</script>
+
+<style scoped>
+.video-wrapper {
+  position: relative;
+  width: 100%;
+  max-width: 720px; /* optional: caps how big it can grow, remove if you want truly full width */
+  aspect-ratio: 9 / 16;
+  overflow: hidden;
+  background: #000;
+}
+
+.video-iframe {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.play-pause-overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.play-pause-overlay svg {
+  width: 72px;
+  height: 72px;
+  fill: rgba(255, 255, 255, 0.9);
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
+}
+</style>
\ No newline at end of file
diff --git a/app/components/VideoTestimonial.vue b/app/components/VideoTestimonial.vue
new file mode 100644
index 0000000..f037270
--- /dev/null
+++ b/app/components/VideoTestimonial.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="video-wrapper">
+    <iframe
+      ref="playerRef"
+      class="video-iframe"
+      :src="videoUrl"
+      title="YouTube video player"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+    ></iframe>
+
+    <button
+      class="play-pause-overlay"
+      type="button"
+      :aria-label="isPlaying ? 'Pause video' : 'Play video'"
+      @click="togglePlay"
+    >
+      <svg v-if="!isPlaying" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
+      <svg v-else viewBox="0 0 24 24"><path d="M6 5h4v14H6zM14 5h4v14h-4z" /></svg>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  slug: String
+})
+
+const { locale } = useI18n()
+const slug = computed(() => props.slug)
+
+const { queryVideoTestimonial } = useVideoTestimonial(slug, locale)
+
+const { data: customerStory } = await useAsyncData(
+  `video-testimonial-${locale.value}-${slug.value}`,
+  queryVideoTestimonial,
+  { watch: [locale, slug] }
+)
+
+const playerRef = ref(null)
+const isPlaying = ref(false)
+
+// Build the embed URL with controls hidden and the JS API enabled
+const videoUrl = computed(() => {
+  const rawUrl = customerStory.value?.meta?.url
+  if (!rawUrl) return ''
+  const url = new URL(rawUrl)
+  url.searchParams.set('controls', '0')
+  url.searchParams.set('enablejsapi', '1')
+  url.searchParams.set('modestbranding', '1')
+  url.searchParams.set('playsinline', '1')
+  url.searchParams.set('rel', '0')
+  if (typeof window !== 'undefined') {
+    // required for the postMessage API to work reliably
+    url.searchParams.set('origin', window.location.origin)
+  }
+  return url.toString()
+})
+
+function postCommand(func) {
+  playerRef.value?.contentWindow?.postMessage(
+    JSON.stringify({ event: 'command', func, args: [] }),
+    '*'
+  )
+}
+
+function togglePlay() {
+  postCommand(isPlaying.value ? 'pauseVideo' : 'playVideo')
+  isPlaying.value = !isPlaying.value
+}
+
+// Keep the button state in sync with actual player state
+function handleMessage(event) {
+  if (typeof event.data !== 'string') return
+  try {
+    const data = JSON.parse(event.data)
+    if (data.event === 'infoDelivery' && typeof data.info?.playerState === 'number') {
+      // 1 = playing, 2 = paused, 0 = ended
+      if (data.info.playerState === 1) isPlaying.value = true
+      else if (data.info.playerState === 2 || data.info.playerState === 0) isPlaying.value = false
+    }
+  } catch {
+    // ignore non-JSON messages from other sources
+  }
+}
+
+onMounted(() => window.addEventListener('message', handleMessage))
+onBeforeUnmount(() => window.removeEventListener('message', handleMessage))
+</script>
+
+<style scoped>
+.video-wrapper {
+  position: relative;
+  width: 720px;
+  height: 1280px;
+  max-width: 100%;
+  overflow: hidden;
+  background: #000;
+}
+
+.video-iframe {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.play-pause-overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.play-pause-overlay svg {
+  width: 72px;
+  height: 72px;
+  fill: rgba(255, 255, 255, 0.9);
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
+}
+</style>
\ No newline at end of file
diff --git a/app/composables/useVideoCustomerStories.js b/app/composables/useVideoCustomerStories.js
new file mode 100644
index 0000000..2d45cd7
--- /dev/null
+++ b/app/composables/useVideoCustomerStories.js
@@ -0,0 +1,12 @@
+export function useVideoCustomerStories(locale) {
+  async function queryVideoCustomerStories() {
+    let res = await queryCollection('jsonPages')
+      .where('lang', '=', locale.value)
+      .where('pageType', '=', 'video_testimonials')
+      .all()
+
+    return res
+  }
+
+  return { queryVideoCustomerStories }
+}
diff --git a/app/composables/useVideoCustomerStory.js b/app/composables/useVideoCustomerStory.js
new file mode 100644
index 0000000..5bd5855
--- /dev/null
+++ b/app/composables/useVideoCustomerStory.js
@@ -0,0 +1,14 @@
+export function useVideoCustomerStory(slug, locale) {
+  async function queryVideoCustomerStory() {
+    let res = await queryCollection('jsonPages')
+      .where('lang', '=', locale.value)
+      .where('pageType', '=', 'video_testimonials')
+      .all()
+
+    res = res.filter(t => t.stem.split('/')[2] == slug.value)
+
+    return res[0]
+  }
+
+  return { queryVideoCustomerStory }
+}
diff --git a/app/composables/useVideoTestimonial.js b/app/composables/useVideoTestimonial.js
new file mode 100644
index 0000000..68dd853
--- /dev/null
+++ b/app/composables/useVideoTestimonial.js
@@ -0,0 +1,14 @@
+export function useVideoTestimonial(slug, locale) {
+  async function queryVideoTestimonial() {
+    let res = await queryCollection('jsonPages')
+      .where('lang', '=', locale.value)
+      .where('pageType', '=', 'video_testimonials')
+      .all()
+
+    res = res.filter(t => t.stem.split('/')[2] == slug.value)
+
+    return res[0]
+  }
+
+  return { queryVideoTestimonial }
+}
diff --git a/app/composables/useVideoTestimonials.js b/app/composables/useVideoTestimonials.js
new file mode 100644
index 0000000..526e326
--- /dev/null
+++ b/app/composables/useVideoTestimonials.js
@@ -0,0 +1,12 @@
+export function useVideoTestimonials(locale) {
+  async function queryVideoTestimonials() {
+    let res = await queryCollection('jsonPages')
+      .where('lang', '=', locale.value)
+      .where('pageType', '=', 'video_testimonials')
+      .all()
+
+    return res
+  }
+
+  return { queryVideoTestimonials }
+}
diff --git a/app/pages/customer-stories.vue b/app/pages/customer-stories.vue
index 62f0570..71a1c79 100644
--- a/app/pages/customer-stories.vue
+++ b/app/pages/customer-stories.vue
@@ -3,6 +3,9 @@
     <div class="section-title has-text-centered mt4 mb4">
       {{ page.meta.header.title }}
     </div>
+
+    <VideoCustomerStories/>
+
     <div class="section-subtitle has-text-centered mt4" data-aos="fade-up">
       Advertisement
     </div>
diff --git a/content.config.ts b/content.config.ts
index 2746a12..0bdc7b3 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -19,7 +19,9 @@ const COLLECTIONS = [
   { key: 'audiences' },
   { key: 'studios' },
   { key: 'testimonials' },
-  { key: 'customer_stories' }
+  { key: 'customer_stories' },
+  { key: 'video_testimonials' },
+  { key: 'video_customer_stories' }
 ]
 
 // Structural validation per pageType, enforced in getItem so a shape drift
diff --git a/content/en_pages.json b/content/en_pages.json
index 63a9ac6..4311b33 100644
--- a/content/en_pages.json
+++ b/content/en_pages.json
@@ -4018,5 +4018,45 @@
       "quote": "I knew that if I brought in a new tool, I needed to address a need that hadn't been identified by the core team already in place. The main challenge right away was not to constrain them.",
       "category": "Feature Films (2D)"
     }
+  },
+  "video_testimonials": {
+    "wizz": {
+      "url": "https://www.youtube.com/embed/_cotJ52cfD8"
+    },
+    "miyu-1": {
+      "url": "https://www.youtube.com/embed/8yJVP2aI2gE"
+    },
+    "miyu-2": {
+      "url": "https://www.youtube.com/embed/6_2sJYksR9U"
+    },
+    "fees": {
+      "url": "https://www.youtube.com/embed/4mDWlwm6oU0"
+    },
+    "normaal": {
+      "url": "https://www.youtube.com/embed/3wWdfLDWBPM"
+    },
+    "remembers": {
+      "url": "https://www.youtube.com/embed/eBl-z8kdfSs"
+    }
+  },
+  "video_customer_stories": {
+    "wizz": {
+      "url": "https://www.youtube.com/embed/DLstftZIZ_s"
+    },
+    "miyu-1": {
+      "url": "https://www.youtube.com/embed/s784-XMgeLA"
+    },
+    "miyu-2": {
+      "url": "https://www.youtube.com/embed/qX8s9Wy_hnU"
+    },
+    "fees": {
+      "url": "https://www.youtube.com/embed/m4YqTqWusSs?si=GPvxX1pXrQHqtJM4&amp;controls=0"
+    },
+    "normaal": {
+      "url": "https://www.youtube.com/embed/S3FDuitepJc"
+    },
+    "remembers": {
+      "url": "https://www.youtube.com/embed/W1q7AobU1lw"
+    }
   }
-}
+}
\ No newline at end of file
diff --git a/content/fr_pages.json b/content/fr_pages.json
index a3e1e2f..7781c30 100644
--- a/content/fr_pages.json
+++ b/content/fr_pages.json
@@ -3977,5 +3977,45 @@
       "quote": "Je savais que si j'introduisais un nouvel outil, je devais répondre à un besoin qui n'avait pas encore été identifié par l'équipe en place. Le principal défi dès le départ était de ne pas les contraindre.",
       "category": "Longs métrages (2D)"
     }
+  },
+  "video_testimonials": {
+    "wizz": {
+      "url": "https://www.youtube.com/embed/_cotJ52cfD8"
+    },
+    "miyu-1": {
+      "url": "https://www.youtube.com/embed/8yJVP2aI2gE"
+    },
+    "miyu-2": {
+      "url": "https://www.youtube.com/embed/6_2sJYksR9U"
+    },
+    "fees": {
+      "url": "https://www.youtube.com/embed/4mDWlwm6oU0"
+    },
+    "normaal": {
+      "url": "https://www.youtube.com/embed/3wWdfLDWBPM"
+    },
+    "remembers": {
+      "url": "https://www.youtube.com/embed/eBl-z8kdfSs"
+    }
+  },
+  "video_customer_stories": {
+    "wizz": {
+      "url": "https://www.youtube.com/embed/DLstftZIZ_s"
+    },
+    "miyu-1": {
+      "url": "https://www.youtube.com/embed/s784-XMgeLA"
+    },
+    "miyu-2": {
+      "url": "https://www.youtube.com/embed/qX8s9Wy_hnU"
+    },
+    "fees": {
+      "url": "https://www.youtube.com/embed/m4YqTqWusSs?si=GPvxX1pXrQHqtJM4&amp;controls=0"
+    },
+    "normaal": {
+      "url": "https://www.youtube.com/embed/S3FDuitepJc"
+    },
+    "remembers": {
+      "url": "https://www.youtube.com/embed/W1q7AobU1lw"
+    }
   }
 }
diff --git a/content/ja_pages.json b/content/ja_pages.json
index 37e1c16..4884a02 100644
--- a/content/ja_pages.json
+++ b/content/ja_pages.json
@@ -3953,5 +3953,45 @@
       "quote": "新しいツールを導入するなら、既存のチームがまだ気づいていないニーズに応えるものでなければならないと分かっていました。最初の課題は、チームを制約しないことでした。",
       "category": "長編映画（2D）"
     }
+  },
+  "video_testimonials": {
+    "wizz": {
+      "url": "https://www.youtube.com/embed/_cotJ52cfD8"
+    },
+    "miyu-1": {
+      "url": "https://www.youtube.com/embed/8yJVP2aI2gE"
+    },
+    "miyu-2": {
+      "url": "https://www.youtube.com/embed/6_2sJYksR9U"
+    },
+    "fees": {
+      "url": "https://www.youtube.com/embed/4mDWlwm6oU0"
+    },
+    "normaal": {
+      "url": "https://www.youtube.com/embed/3wWdfLDWBPM"
+    },
+    "remembers": {
+      "url": "https://www.youtube.com/embed/eBl-z8kdfSs"
+    }
+  },
+  "video_customer_stories": {
+    "wizz": {
+      "url": "https://www.youtube.com/embed/DLstftZIZ_s"
+    },
+    "miyu-1": {
+      "url": "https://www.youtube.com/embed/s784-XMgeLA"
+    },
+    "miyu-2": {
+      "url": "https://www.youtube.com/embed/qX8s9Wy_hnU"
+    },
+    "fees": {
+      "url": "https://www.youtube.com/embed/m4YqTqWusSs?si=GPvxX1pXrQHqtJM4&amp;controls=0"
+    },
+    "normaal": {
+      "url": "https://www.youtube.com/embed/S3FDuitepJc"
+    },
+    "remembers": {
+      "url": "https://www.youtube.com/embed/W1q7AobU1lw"
+    }
   }
 }