Rich Media Embeds in Markdoc
Learn how to embed Spotify, YouTube, and Twitter content directly in your blog posts using Markdoc tags or Blocks
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 %} tag 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 Markdoc tags, you can create rich, engaging blog posts that include multimedia content from your favorite platforms. Try them out in your next blog post!