Rich Media Embeds in Markdoc

Spotify Embeds

You can embed any Spotify content - tracks, albums, playlists, or podcasts. Here’s an example of a Spotify track:

{% Spotify url=“https://open.spotify.com/track/0y5unxPEvpulXKPgw4StQW?si=b9c1f1b16f3540ac” /%}

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 #qza5nDCSJTc /%}

{% YouTube id="qza5nDCSJTc" /%}

Using Full URL

{% YouTube url=“https://youtu.be/YuG4-lewUTs?si=ZJrcuxpBoU9ayDG0” /%}

{% 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” /%}

{% Twitter url="https://x.com/leowg/status/1983085626690838835" /%}

Using ID and Username

{% Twitter #1979523555885793745 username=“leowg” /%}

{% 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 id or url prop
• Twitter: Accepts either url or both id and username props

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!