From ca2757e0165de282b6f80ccbe29c2a71746b98b2 Mon Sep 17 00:00:00 2001
From: momo5502 <mauriceheumann@gmail.com>
Date: Sun, 28 Sep 2025 10:09:25 +0200
Subject: [PATCH] Isolate youtube video component

---
 page/src/components/youtube-video.tsx | 17 +++++++++++++++++
 page/src/landing-page.tsx             | 14 ++------------
 2 files changed, 19 insertions(+), 12 deletions(-)
 create mode 100644 page/src/components/youtube-video.tsx

diff --git a/page/src/components/youtube-video.tsx b/page/src/components/youtube-video.tsx
new file mode 100644
index 00000000..1785f3d7
--- /dev/null
+++ b/page/src/components/youtube-video.tsx
@@ -0,0 +1,17 @@
+export interface FolderProps {
+  id: string;
+}
+
+export function YoutubeVideo(props: FolderProps) {
+  return (
+    <iframe
+      className="w-full h-full"
+      title="Sogen Emulator Overview"
+      frameBorder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerPolicy="strict-origin-when-cross-origin"
+      allowFullScreen
+      srcDoc={`<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,div{position:absolute;width:100%;top:0;bottom:0;margin:auto;}div{height:1.5em;text-align:center;font:30px/1.5 sans-serif;color:white;overflow:visible;}span{background:red;padding:10px 20px;border-radius:15px;box-shadow: 3px 5px 10px #0000007a;}</style><a href="https://www.youtube.com/embed/${props.id}/?autoplay=1"><img src="https://img.youtube.com/vi/${props.id}/maxresdefault.jpg"><div><span>&nbsp;▶</span></div></a>`}
+    ></iframe>
+  );
+}
diff --git a/page/src/landing-page.tsx b/page/src/landing-page.tsx
index 17b53859..fb546903 100644
--- a/page/src/landing-page.tsx
+++ b/page/src/landing-page.tsx
@@ -16,6 +16,7 @@ import {
   Layers,
 } from "lucide-react";
 import { Header } from "./Header";
+import { YoutubeVideo } from "@/components/youtube-video";
 
 function generateButtons(additionalClasses: string = "") {
   return (
@@ -248,18 +249,7 @@ export function LandingPage() {
               <div className="relative group">
                 <div className="absolute -inset-4 bg-gradient-to-r from-neutral-500/10 to-neutral-500/10 rounded-3xl blur-xl group-hover:blur-2xl transition-all duration-300"></div>
                 <div className="relative aspect-video rounded-2xl overflow-hidden ">
-                  {["wY9Q0DhodOQ"].map((value, index) => (
-                    <iframe
-                      key={index}
-                      className="w-full h-full"
-                      title="Sogen Emulator Overview"
-                      frameBorder="0"
-                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                      referrerPolicy="strict-origin-when-cross-origin"
-                      allowFullScreen
-                      srcDoc={`<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,div{position:absolute;width:100%;top:0;bottom:0;margin:auto;}div{height:1.5em;text-align:center;font:30px/1.5 sans-serif;color:white;overflow:visible;}span{background:red;padding:10px 20px;border-radius:15px;box-shadow: 3px 5px 10px #0000007a;}</style><a href=https://www.youtube.com/embed/${value}/?autoplay=1><img src=https://img.youtube.com/vi/${value}/maxresdefault.jpg><div><span>&nbsp;▶</span></div></a>`}
-                    ></iframe>
-                  ))}
+                  <YoutubeVideo id="wY9Q0DhodOQ" />
                 </div>
               </div>
             </div>