Video & Social Embeds
Embed YouTube videos and Twitter/X posts in your content using simple MDC components.
UXLab provides simple components for embedding external media in your markdown content.
YouTube Videos
Embed YouTube videos using the youtube component with a video ID:
Syntax: ::youtube{id="VIDEO_ID"} followed by :: on a new line
Example
Options
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | required | YouTube video ID |
title | string | YouTube video <id> | Accessible name for the player; say what the video is |
aspect | string | 16/9 | Aspect ratio (e.g., 16/9, 4/3, 1/1) |
maxWidth | string/number | 800 | Maximum width in pixels |
start | number | 0 | Start time in seconds |
autoplay | boolean | false | Auto-play video |
loop | boolean | false | Loop video |
mute | boolean | false | Mute audio |
Custom Aspect Ratio Example
For a square video or different aspect ratio:
::youtube{id="dQw4w9WgXcQ" aspect="4/3" maxWidth="600"} followed by :: on a new line
Finding Video IDs
The video ID is the value after v= in a YouTube URL:
https://youtube.com/watch?v=dQw4w9WgXcQ→ ID isdQw4w9WgXcQhttps://youtu.be/dQw4w9WgXcQ→ ID isdQw4w9WgXcQ
Twitter/X Posts
Embed tweets using the tweet component with a tweet ID:
Syntax: ::tweet{id="TWEET_ID"} followed by :: on a new line
Example
The above embeds the very first tweet ever posted (by Jack Dorsey on March 21, 2006).
Options
| Prop | Type | Default | Description |
|---|---|---|---|
id | string/number | required | Tweet ID |
conversation | none/all | none | Show conversation thread |
cards | hidden/visible | visible | Show link cards |
align | left/center/right | center | Alignment |
width | number | 550 | Max width in pixels |
scale | number | 1 | Scale factor for larger display |
Larger Tweet Example
For a larger, more prominent tweet display (like Slidev):
::tweet{id="20" scale="1.2"} followed by :: on a new line
Finding Tweet IDs
The tweet ID is the number at the end of a tweet URL:
https://twitter.com/jack/status/20→ ID is20https://x.com/elonmusk/status/1234567890→ ID is1234567890
Theme Support
Both components automatically adapt to your current color mode:
- YouTube: Uses privacy-enhanced mode with rounded corners
- Tweets: Re-render with Twitter's dark/light theme when you toggle color mode
Print Support
Embeds are print-friendly:
- YouTube shows a placeholder with the video URL
- Tweets render as static content with a link to view on X
Tips
- Use
maxWidthon YouTube to prevent videos from stretching too wide - Use
scaleon tweets for presentations or hero sections - Both components lazy-load for better page performance
- For accessibility, both include proper titles and fallback content