Replace YouTube cards with embedded video players

- 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>
This commit is contained in:
zzstoatzz 2025-06-12 12:19:03 -05:00
commit 855ffb28b1
2 changed files with 26 additions and 6 deletions

View file

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

View file

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