From 855ffb28b1749eb66d286756c0ea7f6b48ddc367 Mon Sep 17 00:00:00 2001
From: zzstoatzz <thrast36@gmail.com>
Date: Thu, 12 Jun 2025 12:19:03 -0500
Subject: [PATCH] Replace YouTube cards with embedded video players
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Convert YouTube tutorial cards to embedded iframe players
- Create reusable YouTubeEmbed component in /snippets/
- Follow existing component pattern (like VersionBadge)
- Use Mintlify-compatible JSX syntax (camelCase attributes)
- Add responsive styling for better viewing experience

This improves maintainability and ensures consistent YouTube embed styling across the docs.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 docs/community/showcase.mdx     | 20 ++++++++++++++------
 docs/snippets/youtube-embed.mdx | 12 ++++++++++++
 2 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 docs/snippets/youtube-embed.mdx

diff --git a/docs/community/showcase.mdx b/docs/community/showcase.mdx
index c3b5ad967..3f0ade44e 100644
--- a/docs/community/showcase.mdx
+++ b/docs/community/showcase.mdx
@@ -4,6 +4,8 @@ description: 'High-quality projects and examples from the FastMCP community'
 icon: 'users'
 ---
 
+import { YouTubeEmbed } from '/snippets/youtube-embed.mdx'
+
 ## Featured Projects
 
 Discover exemplary MCP servers and implementations created by our community. These projects demonstrate best practices and innovative uses of FastMCP.
@@ -16,13 +18,19 @@ Discover exemplary MCP servers and implementations created by our community. The
 
 #### Video Tutorials
 
-<Card title="Build Remote MCP Servers w/ Python & FastMCP" icon="youtube" href="https://www.youtube.com/watch?v=bOYkbXP-GGo">
-  Claude Integrations Tutorial by Greg + Code - Learn how to build remote MCP servers using Python and FastMCP.
-</Card>
+**Build Remote MCP Servers w/ Python & FastMCP** - Claude Integrations Tutorial by Greg + Code
 
-<Card title="FastMCP — the best way to build an MCP server with Python" icon="youtube" href="https://www.youtube.com/watch?v=rnljvmHorQw">
-  Tutorial by ZazenCodes - Comprehensive guide to building MCP servers with FastMCP in Python.
-</Card>
+<YouTubeEmbed 
+  videoId="bOYkbXP-GGo" 
+  title="Build Remote MCP Servers w/ Python & FastMCP" 
+/>
+
+**FastMCP — the best way to build an MCP server with Python** - Tutorial by ZazenCodes
+
+<YouTubeEmbed 
+  videoId="rnljvmHorQw" 
+  title="FastMCP — the best way to build an MCP server with Python" 
+/>
 
 ### Community Examples
 
diff --git a/docs/snippets/youtube-embed.mdx b/docs/snippets/youtube-embed.mdx
new file mode 100644
index 000000000..1c36e6cfd
--- /dev/null
+++ b/docs/snippets/youtube-embed.mdx
@@ -0,0 +1,12 @@
+export const YouTubeEmbed = ({ videoId, title }) => {
+    return (
+        <iframe
+            className="w-full aspect-video rounded-md"
+            src={`https://www.youtube.com/embed/${videoId}`}
+            title={title}
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+        />
+    );
+};
\ No newline at end of file