Lightemerald/windows-user-space-emulator
2
0
Fork 0
mirror of https://github.com/momo5502/emulator.git synced 2026-01-18 19:23:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Isolate youtube video component

Browse Source
This commit is contained in:
momo5502
2025-09-28 10:09:25 +02:00
parent b606eca26e
commit ca2757e016
2 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
page/src/components/youtube-video.tsx Normal file
View File

@@ -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>
);
}

14
page/src/landing-page.tsx
View File

@@ -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>