From b9b96e941732232eef662ca23a7eb08178abe5ea Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Thu, 7 Aug 2025 08:40:49 -0400
Subject: [PATCH] embed docs edit

---
 src/components/ScrollerVideo/ScrollerVideo.mdx    | 6 ++++--
 src/components/ScrollerVideo/demo/Embedded.svelte | 5 ++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/ScrollerVideo/ScrollerVideo.mdx b/src/components/ScrollerVideo/ScrollerVideo.mdx
index acd2ba41..c5903c5c 100644
--- a/src/components/ScrollerVideo/ScrollerVideo.mdx
+++ b/src/components/ScrollerVideo/ScrollerVideo.mdx
@@ -70,7 +70,7 @@ To show different videos based on the screen width, use the `ScrollerVideo` comp
 
 ## Embeds
 
-Setting `embedded` will autoplay the entire `ScrollerVideo` component like a video.
+Setting `embedded` to `true` will turn `ScrollerVideo` into an embeddable version, where the video autoplays when the user scrolls upon it. Optionally, you can control the embed video behaviour by passing `embeddedProps` to control the autoplay `delay`, `threshold` for triggering autoplay, and the `duration` of the video. 
 
 > 💡**TIP:** Another way to recreate the ScrollerVideo experience for embeds is to record the desktop screen with [Scroll Capture](https://chromewebstore.google.com/detail/scroll-capture/egmhoeaacclmanaimofoooiamhpkimkk?hl=en) while scrolling through the video and use that video instead as an HTML video component.
 
@@ -79,11 +79,13 @@ Setting `embedded` will autoplay the entire `ScrollerVideo` component like a vid
 ```svelte
 <script lang="ts">
   import { ScrollerVideo } from '@reuters-graphics/graphics-components';
+
+  let embedded = $state(true); // Set to true to enable embedded mode
 </script>
 
 <ScrollerVideo
   src='my-video.mp4'
-  embedded={true}
+  {embedded}
   embeddedProps={{
     delay: 200, // Optional: Delay before autoplay starts. Defaults to 200ms.
     threshold: 0.5, // Optional: Threshold for triggering the autoplay. Defaults to 0.5.
diff --git a/src/components/ScrollerVideo/demo/Embedded.svelte b/src/components/ScrollerVideo/demo/Embedded.svelte
index 616d9640..d8cff44f 100644
--- a/src/components/ScrollerVideo/demo/Embedded.svelte
+++ b/src/components/ScrollerVideo/demo/Embedded.svelte
@@ -3,6 +3,7 @@
   import ScrollerVideoForeground from '../ScrollerVideoForeground.svelte';
   import Goldengate from '../videos/goldengate.mp4';
   import BodyText from '../../BodyText/BodyText.svelte';
+  import Block from '../../Block/Block.svelte';
 
   import type { ContainerWidth } from '../../@types/global';
 
@@ -46,6 +47,8 @@
   const dummyText =
     'Reprehenderit hamburger pork bresaola, dolore chuck sirloin landjaeger ham hock tempor meatball alcatra nostrud pork belly. Culpa pork belly doner ea jowl, elit deserunt leberkas cow shoulder ham hock dolore.';
   const scrollerVideoBlock = content.blocks[0];
+
+  let embedded = $state(true);
 </script>
 
 <BodyText text={dummyText} />
@@ -59,7 +62,7 @@
   src={Goldengate}
   class="embedded-demo"
   showDebugInfo={true}
-  embedded={true}
+  {embedded}
   embeddedProps={{
     threshold: 0.5,
     duration: 12000,