From 2387062b030f7bfce3a4ec3840325f18a93ae184 Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Wed, 11 Dec 2024 11:08:01 +0100
Subject: [PATCH] fix import and video player media queries

---
 .../{interface.mp4 => studio-interface.mp4}     | Bin
 .../blog/src/components/VideoPlayer.astro       |  16 ++++++++++++----
 ...-ai-video-generator-built-with-open-saas.mdx |   4 ++--
 3 files changed, 14 insertions(+), 6 deletions(-)
 rename opensaas-sh/blog/src/assets/turboreel/{interface.mp4 => studio-interface.mp4} (100%)

diff --git a/opensaas-sh/blog/src/assets/turboreel/interface.mp4 b/opensaas-sh/blog/src/assets/turboreel/studio-interface.mp4
similarity index 100%
rename from opensaas-sh/blog/src/assets/turboreel/interface.mp4
rename to opensaas-sh/blog/src/assets/turboreel/studio-interface.mp4
diff --git a/opensaas-sh/blog/src/components/VideoPlayer.astro b/opensaas-sh/blog/src/components/VideoPlayer.astro
index 2742c8df..a75fdbee 100644
--- a/opensaas-sh/blog/src/components/VideoPlayer.astro
+++ b/opensaas-sh/blog/src/components/VideoPlayer.astro
@@ -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>
\ No newline at end of file
diff --git a/opensaas-sh/blog/src/content/docs/blog/2024-12-10-turboreel-os-ai-video-generator-built-with-open-saas.mdx b/opensaas-sh/blog/src/content/docs/blog/2024-12-10-turboreel-os-ai-video-generator-built-with-open-saas.mdx
index 7072fbf4..fd732d01 100644
--- a/opensaas-sh/blog/src/content/docs/blog/2024-12-10-turboreel-os-ai-video-generator-built-with-open-saas.mdx
+++ b/opensaas-sh/blog/src/content/docs/blog/2024-12-10-turboreel-os-ai-video-generator-built-with-open-saas.mdx
@@ -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.