Rich Media Embeds in MDX
Learn how to embed Spotify, YouTube, and Twitter content directly in your blog posts using MDX components.
• 3 min read
MDXTutorialMedia Embeds
Spotify Embeds
You can embed any Spotify content - tracks, albums, playlists, or podcasts. Here’s an example of a Spotify track:
Simply use the <Spotify> component with the Spotify URL:
<Spotify url="https://open.spotify.com/track/0y5unxPEvpulXKPgw4StQW?si=b9c1f1b16f3540ac" />
YouTube Embeds
Embed YouTube videos using either the video ID or the full URL. Both approaches work:
Using Video ID
<YouTube id="qza5nDCSJTc" />
Using Full URL
<YouTube url="https://youtu.be/YuG4-lewUTs?si=ZJrcuxpBoU9ayDG0" />
Twitter/X Embeds
Embed tweets using either the tweet ID and username, or the full tweet URL:
Using Full URL (Recommended)
<Twitter url="https://x.com/leowg/status/1983085626690838835" />
Using ID and Username
<Twitter id="1979523555885793745" username="leowg" />
Flexibility
All components are designed to be flexible:
- Spotify: Accepts any Spotify URL (automatically converts to embed URL)
- YouTube: Accepts either
idorurlprop - Twitter: Accepts either
urlor bothidandusernameprops
This makes it easy to quickly embed content without worrying about URL formats!
Conclusion
With these custom MDX components, you can create rich, engaging blog posts that include multimedia content from your favorite platforms. Try them out in your next blog post!