Music & audioopen.spotify.com
Can you embed Spotify in an iframe?
Yes, with the embed code from Share, Embed. The code uses an open.spotify.com/embed URL, not the normal page link.
Checked Test again
Live check
Two links, two results
Track pagePartial
open.spotify.com/track/0Lr4kGOYn9l83EjuK6cZFQ- X-Frame-Options
- Not sent
- CSP frame-ancestors
- 'self' https://adgen-dev.spotify.com/account/*/ad/*/details https://adgen-dev.spotify.com/preview/* https://local.spotify.net/account/*/ad/*/details https://local.spotify.net/preview/* https://app.smartly.io/*
- Response
- 200 OK · 130 ms · HTTPS
Embed URLEmbeddable
open.spotify.com/embed/track/0Lr4kGOYn9l83EjuK6cZFQ- X-Frame-Options
- Not sent
- CSP frame-ancestors
- Not sent
- Response
- 200 OK · 1593 ms · HTTPS
Steps
How to embed Spotify
- Open the track, album, playlist, artist, podcast or episode in the Spotify Web Player.
- ClickMore options (…)thenSharethenEmbed track
- The last item changes with the type, for example Embed episode. Set the color and size of the embed.
- Click Copy. Paste the code into the HTML of your page.
Embed code
Paste this into your page
HTML
<iframe
style="border-radius: 12px"
src="https://open.spotify.com/embed/{type}/{id}"
width="100%"
height="352"
frameborder="0"
allowfullscreen
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy"
title="{title}">
</iframe>Keep encrypted-media in the allow attribute. Without it, visitors get only previews.
URL patterns
Swap the link you have for the embed URL
- You haveopen.spotify.com/track/{id}Use in the iframeopen.spotify.com/embed/track/{id}
- You haveopen.spotify.com/playlist/{id}Use in the iframeopen.spotify.com/embed/playlist/{id}
- You haveopen.spotify.com/episode/{id}Use in the iframeopen.spotify.com/embed/episode/{id}
Add /embed after the host. The type and the ID stay the same.
Good to know
- In some cases the embed plays only a preview clip of less than 30 seconds.
- Embeds work best in Chrome, Firefox, Edge, Opera and Safari.
- For podcast episodes, you can set a custom start point.
- Eligible music-video tracks use the same embed code as audio tracks. Check that the embed preview shows the video.
Sources
- Spotify for Developers · Embedsdeveloper.spotify.com/documentation/embeds
- Spotify for Developers · Creating an Embeddeveloper.spotify.com/documentation/embeds/tutorials/creating-an-embed
- Spotify for Developers · Embeds troubleshootingdeveloper.spotify.com/documentation/embeds/tutorials/troubleshooting
- MDN · CSP frame-ancestorsdeveloper.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/frame-ancestors
- iframecheck live check · both links
Profile updated