Embeds (YouTube & Twitter)

Posts support YouTube and Twitter/X embeds via MDX components.

YouTube

Method 1: Video ID

<YouTubeEmbed id="dQw4w9WgXcQ" title="Optional video title" />

Method 2: Full URL (ID is extracted automatically)

<YouTubeEmbed id="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />

Supported URL formats:

• https://www.youtube.com/watch?v=VIDEO_ID
• https://youtu.be/VIDEO_ID
• https://www.youtube.com/embed/VIDEO_ID
• Or use the video ID directly: VIDEO_ID

Props:

• id (required): YouTube video ID or full URL
• title (optional): Video title for accessibility; default: "YouTube video player"
• width (optional): Width; default: 100%
• height (optional): Height; default: auto (16:9)

Example:

## Video demo

<YouTubeEmbed id="dQw4w9WgXcQ" title="Go concurrency in practice" />

Twitter/X

Usage:

<TwitterEmbed url="https://twitter.com/username/status/1234567890" align="center" />

Props:

• url (required): Full tweet URL (supports twitter.com and x.com)
• align (optional): left | center | right; default: center

Example:

<TwitterEmbed url="https://twitter.com/golang/status/1234567890" align="center" />

Implementation notes

• Components: src/components/embeds/YouTubeEmbed.tsx and src/components/embeds/TwitterEmbed.tsx
• MDX: Registered in src/libs/mdx-config.tsx, so they are available in any MDX file
• Styling: Responsive, 16:9 for YouTube, dark-mode aware
• Performance: YouTube uses loading="lazy"; Twitter script loads on demand