Replace VimeoEmbed component with VideoEmbed for YouTube videos in architecture documentation; add VideoEmbed component for responsive YouTube video embedding.

Signed-off-by: Pete Cheslock <[email protected]>

Author: petecheslock

docs/architecture/00_architecture.mdx

@@ -11,9 +11,9 @@ Built by leaders in the Kubernetes and vLLM projects, `llm-d` is a community-dri
 
 ##  Video Demonstration
 
-import VimeoEmbed from '@site/src/components/VimeoEmbed';
+import VideoEmbed from '@site/src/components/VideoEmbed';
 
-<VimeoEmbed videoId="1084693051" hash="f92f0d6b1d" />
+<VideoEmbed videoId="32MqYC3OydE" />
 
 ##  Architecture
 

src/components/VideoEmbed.js

@@ -0,0 +1,61 @@
+import React from 'react';
+
+const VideoEmbed = ({ 
+  videoId, 
+  width = '100%', 
+  height = '360',
+  responsive = true,
+  autoplay = false,
+  modestbranding = true,
+  rel = false
+}) => {
+  // Construct the URL with optional parameters
+  const params = new URLSearchParams({
+    autoplay: autoplay ? 1 : 0,
+    modestbranding: modestbranding ? 1 : 0,
+    rel: rel ? 1 : 0
+  });
+  
+  const src = `https://www.youtube.com/embed/${videoId}?${params.toString()}`;
+  
+  const iframe = (
+    <iframe
+      src={src}
+      style={responsive ? {
+        width: '100%',
+        height: '100%'
+      } : {
+        width,
+        height
+      }}
+      frameBorder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+    />
+  );
+
+  if (responsive) {
+    return (
+      <div style={{ 
+        position: 'relative', 
+        paddingBottom: '56.25%', 
+        height: 0,
+        overflow: 'hidden'
+      }}>
+        <div style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%'
+        }}>
+          {iframe}
+        </div>
+      </div>
+    );
+  }
+
+  return iframe;
+};
+
+export default VideoEmbed;