highperfocused/open-saas
1
0
Fork 0
mirror of https://github.com/wasp-lang/open-saas.git synced 2025-11-26 04:49:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix import and video player media queries

Browse Source
This commit is contained in:
vincanger
2024-12-11 11:08:01 +01:00
parent 8343e3f9e0
commit 2387062b03
3 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
opensaas-sh/blog/src/assets/turboreel/interface.mp4 → opensaas-sh/blog/src/assets/turboreel/studio-interface.mp4
View File

16
opensaas-sh/blog/src/components/VideoPlayer.astro
View File

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

4
opensaas-sh/blog/src/content/docs/blog/2024-12-10-turboreel-os-ai-video-generator-built-with-open-saas.mdx
View File

@@ -11,7 +11,7 @@ authors: milica
import VideoPlayer from '../../../components/VideoPlayer.astro'; import VideoPlayer from '../../../components/VideoPlayer.astro';
import { Image } from 'astro:assets'; import { Image } from 'astro:assets';
import landing from '../../../assets/turboreel/landing.webp'; 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'; import opensaas from '../../../assets/turboreel/opensaas.mp4';
<Image src={landing} alt="Landing page" loading="lazy" /> <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. 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. The platform’s **open-source foundation** unlocks development potential, while the **paid SaaS layer** helps with funding.