From c7e776627fa235f16f0b7da541d26fea8fb2ee58 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Mon, 21 Jul 2025 14:11:49 -0400
Subject: [PATCH] small style tweaks in ScrollyVideo.svelte

---
 src/components/ScrollyVideo/ScrollyVideo.svelte | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/ScrollyVideo/ScrollyVideo.svelte b/src/components/ScrollyVideo/ScrollyVideo.svelte
index ad80e779..76dfebd4 100644
--- a/src/components/ScrollyVideo/ScrollyVideo.svelte
+++ b/src/components/ScrollyVideo/ScrollyVideo.svelte
@@ -70,6 +70,7 @@
     children?: Snippet;
   }
 
+  /** Default properties for embedded videos */
   const defaultEmbedProps = {
     autoplay: false,
     loop: false,
@@ -79,6 +80,7 @@
     poster: '',
     preload: 'auto' as 'auto' | 'metadata' | 'none',
   };
+
   /**
    * Main logic for ScrollyVideo Svelte component.
    * Handles instantiation, prop changes, and cleanup.
@@ -120,6 +122,7 @@
       if (JSON.stringify(restProps) !== lastPropsString) {
         // if scrollyvideo already exists and any parameter is updated, destroy and recreate.
         if (scrollyVideo && scrollyVideo.destroy) scrollyVideo.destroy();
+
         scrollyVideo = new ScrollyVideo({
           scrollyVideoContainer,
           onReady,
@@ -168,7 +171,7 @@
 </script>
 
 {#if embedded && (embeddedSrc || restProps.src)}
-  <div class="scrolly-video-container" style="width: 100%;">
+  <div class="scrolly-video-container embedded">
     <video
       class="scrolly-video-embedded"
       src={embeddedSrc || restProps.src}
@@ -186,7 +189,7 @@
   <div
     {id}
     class="scrolly-video-container {cls}"
-    style="height: {heightChange}; width: 100%; min-height: 100svh;"
+    style="height: {heightChange}"
   >
     <div bind:this={scrollyVideoContainer} data-scrolly-container>
       {#if scrollyVideo}
@@ -206,4 +209,11 @@
 {/if}
 
 <style lang="scss">
+  .scrolly-video-container {
+    width: 100%;
+
+    &:not(.embedded) {
+      min-height: 100svh;
+    }
+  }
 </style>