fix import and video player media queries

Author: vincanger

…/blog/src/assets/turboreel/interface.mp4 …rc/assets/turboreel/studio-interface.mp4opensaas-sh/blog/src/assets/turboreel/interface.mp4 renamed to opensaas-sh/blog/src/assets/turboreel/studio-interface.mp4 opensaas-sh/blog/src/assets/turboreel/interface.mp4 renamed to opensaas-sh/blog/src/assets/turboreel/studio-interface.mp4

@@ -1,9 +1,11 @@
 ---
 interface Props {
   src: string;
+  lgWidth?: string;
+  smWidth?: string;
 }
 
-const { src } = Astro.props;
+const { src, lgWidth = '55%', smWidth = '100%' } = Astro.props;
 ---
 
 <video
@@ -13,15 +15,21 @@ const { src } = Astro.props;
   muted
   controls
   loop
+  class="video-player"
 >
   <track kind="captions">
 </video>
 
-<style>
+<style define:vars={{ lgWidth, smWidth }}>
   .video-player {
-    width: 100%;
-    max-width: 800px;
+    width: var(--lgWidth);
     margin: 2rem auto;
     border-radius: 8px;
   }
+
+  @media (max-width: 425px) {
+    .video-player {
+      width: var(--smWidth);
+    }
+  }
 </style>

opensaas-sh/blog/src/components/VideoPlayer.astro

@@ -11,7 +11,7 @@ authors: milica
 import VideoPlayer from '../../../components/VideoPlayer.astro';
 import { Image } from 'astro:assets';
 import landing from '../../../assets/turboreel/landing.webp';
-import interface from '../../../assets/turboreel/interface.mp4';
+import studioInterface from '../../../assets/turboreel/studio-interface.mp4';
 import opensaas from '../../../assets/turboreel/opensaas.mp4';
 
 <Image src={landing} alt="Landing page" loading="lazy" />
@@ -36,7 +36,7 @@ Here’s a video presenting Open SaaS, generated with TurboReel 🐝
 
 TurboReel lets users generate short explainer videos with minimal effort. Starting with a single text prompt describing the video’s purpose (e.g. “Create a video on building your SaaS with OpenSaaS”), you can produce professional grade TikTok and YT shorts without needing any video editing skills.
 
-<VideoPlayer src={interface} />
+<VideoPlayer src={studioInterface} />
 
 The platform’s **open-source foundation** unlocks development potential, while the **paid SaaS layer** helps with funding.