Embedding Twitter & YouTube

DocsBlog includes built-in components for embedding Twitter/X posts and YouTube videos directly in your MDX content. No external scripts or iframes needed — the components handle everything.

Twitter / X Embeds

Use the <TwitterEmbed> component to embed any tweet. Just pass the full tweet URL:

<TwitterEmbed url="https://twitter.com/elonmusk/status/1234567890" />

Props

Supported URL Formats

Both twitter.com and x.com URLs are supported:

{/* twitter.com format */}
<TwitterEmbed url="https://twitter.com/username/status/1234567890" />

{/* x.com format */}
<TwitterEmbed url="https://x.com/username/status/1234567890" />

Alignment Options

{/* Left aligned */}
<TwitterEmbed url="https://twitter.com/username/status/123" align="left" />

{/* Centered (default) */}
<TwitterEmbed url="https://twitter.com/username/status/123" />

{/* Right aligned */}
<TwitterEmbed url="https://twitter.com/username/status/123" align="right" />

How It Works

The component uses react-tweet under the hood — a lightweight library that renders tweets as static HTML without loading Twitter's heavy embed script. This means:

• No external JavaScript loaded from twitter.com
• Fast rendering — tweets appear instantly
• Dark mode support — automatically matches your site's theme
• Privacy-friendly — no tracking scripts

YouTube Embeds

Use the <YouTubeEmbed> component to embed YouTube videos. Pass the video ID or full URL:

{/* Using video ID */}
<YouTubeEmbed id="dQw4w9WgXcQ" title="My Video" />

{/* Using full URL */}
<YouTubeEmbed id="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="My Video" />

Props

Supported URL Formats

The component automatically extracts the video ID from various YouTube URL formats:

{/* Standard watch URL */}
<YouTubeEmbed id="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />

{/* Short URL */}
<YouTubeEmbed id="https://youtu.be/dQw4w9WgXcQ" />

{/* Embed URL */}
<YouTubeEmbed id="https://www.youtube.com/embed/dQw4w9WgXcQ" />

{/* Just the ID */}
<YouTubeEmbed id="dQw4w9WgXcQ" />

Responsive Layout

The YouTube embed automatically maintains a 16:9 aspect ratio and scales to the full width of the content area. On mobile, the video player resizes to fit the screen width without horizontal scrolling.

Features

• Lazy loading — Videos load only when scrolled into view (loading="lazy")
• Responsive — 16:9 aspect ratio, full-width on all devices
• Accessible — Proper title attribute for screen readers
• Privacy-enhanced — Uses standard YouTube embed (can be configured for youtube-nocookie.com)

Complete Blog Post Example

Here's a full blog post MDX file using both embeds:

---
title: My Post with Embeds
description: A post featuring Twitter and YouTube embeds
date: 2025-01-15
categories: ["tech"]
tags: ["social-media"]
author: docsblog
---

# My Post with Embeds

Check out this tweet:

<TwitterEmbed url="https://x.com/veraborjeson/status/1846250240222703737" />

And this video tutorial:

<YouTubeEmbed id="dQw4w9WgXcQ" title="Getting Started Tutorial" />

Both embeds are responsive and support dark mode automatically.

Component Source

The embed components live in src/components/embeds/:

• TwitterEmbed.tsx — Twitter/X embed using react-tweet
• YouTubeEmbed.tsx — YouTube iframe embed with responsive layout

They are registered as MDX components in src/libs/mdx-config.tsx, making them available in all MDX files without explicit imports.