wip

src/components/YouTubeEmbed.astro

@@ -0,0 +1,32 @@
+---
+// YouTubeEmbed.astro - Build-time component with full styling control
+interface Props {
+  videoId: string;
+  title?: string;
+  className?: string;
+  aspectRatio?: string;
+  style?: 'default' | 'minimal' | 'rounded' | 'flat';
+}
+
+const { 
+  videoId, 
+  title = "YouTube Video",
+  className = "",
+  aspectRatio = "56.25%",
+  style = "default"
+} = Astro.props;
+
+const embedUrl = `https://www.youtube.com/embed/${videoId}`;
+---
+
+<div class={`not-prose my-6 ${className}`} data-style={style}>
+  <div class="bg-white border border-slate-200/80 rounded-xl overflow-hidden transition-all duration-200 hover:border-slate-300/80 p-1" style={`padding-bottom: calc(${aspectRatio} - 0.5rem); position: relative; height: 0; margin-top: 0.25rem; margin-bottom: 0.25rem;`}>
+    <iframe
+      src={embedUrl}
+      title={title}
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen
+      class="absolute top-1 left-1 w-[calc(100%-0.5rem)] h-[calc(100%-0.5rem)] border-none rounded-md"
+    />
+  </div>
+</div>