Home › Spotify
Paste any Spotify link to generate an embeddable player. Works with tracks, albums, playlists, artists, and podcasts.
Every Spotify embed is a single <iframe> pointing at https://open.spotify.com/embed/{type}/{id}. The type segment is one of six values — track, album, playlist, artist, show, or episode — and the id is the 22-character base62 identifier Spotify assigns to that piece of content. When you paste a public Spotify URL into the generator above, it parses out those two pieces and rebuilds the embed URL in the correct shape. No API key, no oAuth, no account is required: the embed endpoint is a public surface that Spotify maintains specifically so the players show up correctly anywhere on the open web.
The same identifiers also appear in the spotify: URI scheme (for example spotify:track:4cOdK2wGLETKBW3PvgPWqT), which the parser above accepts as an alternative input. If you are integrating from a backend that already has Spotify URIs in its database — common in podcast hosting and music-licensing platforms — the URI form lets you skip a string rewrite.
The embed iframe ships in three sensible heights. A single track renders cleanly at height="152", which shows the album art, title, artist, and progress bar. An album, playlist, artist page, podcast show, or episode wants height="352" to leave room for the larger artwork and the scrollable list of tracks or episodes. Spotify also supports an ultra-compact height="80" mode that drops the album art and gives you just the play bar — useful when you want a track embed in a narrow sidebar or inside a newsletter-style layout. The generator above picks 152 for tracks and 352 for everything else; if you want the 80px compact variant, swap the value in the copied code by hand.
Width is always best set to 100% so the player fills whatever column it is dropped into. Setting a fixed pixel width breaks the responsive layout on phones, and Spotify's player handles its own internal layout down to about 240px wide before things start to wrap. Theme is controlled by a query parameter on the embed URL itself: ?theme=0 is the default dark Spotify look, and ?theme=1 is the light theme. There is no third theme, no accent color, and no custom CSS hook — Spotify keeps brand control of the player chrome.
A Spotify iframe is not free. On first paint it pulls roughly 600 KB of JavaScript and CSS from open.spotify.com, plus the album artwork itself. If you drop the embed above the fold without a loading="lazy" attribute, it will steal main-thread time from your own LCP element and quietly tank your PageSpeed score. The generator above always emits loading="lazy" on the iframe so the embed only initializes when the user actually scrolls near it.
For sites with multiple embeds on the same page (round-up posts, album reviews, podcast feeds), the cost compounds — each iframe spins up its own player runtime. Two embeds is fine. Six embeds on a slow phone connection becomes noticeable. The cheap workaround is the "facade pattern": render a static play-button image, and only swap in the real iframe on click. Google's lite-youtube component is the same idea for YouTube; the same wrapper works for Spotify if you build one.
WordPress: Paste the bare open.spotify.com URL on its own line in the Gutenberg or classic editor. WordPress hits Spotify's oEmbed endpoint automatically and renders the iframe for you — no plugin required since WordPress 4.7. The iframe code from the generator above also works inside a Custom HTML block if you want explicit control over height or theme.
Squarespace: Use a Code block (not the Audio block — the Audio block expects a file upload, not a third-party embed). Paste the iframe HTML directly. The block respects the iframe's width="100%".
Webflow: Use an Embed element. Webflow does not auto-resize embeds, so set the parent div's width to 100% and let the iframe inherit it.
Ghost: Ghost auto-embeds Spotify URLs the same way WordPress does — paste the URL on its own line. The HTML card option is there for explicit iframe code if needed.
Static sites (Astro, Eleventy, Hugo, Jekyll, plain HTML): The iframe is just HTML — drop it anywhere. Wrap it in a <figure> with a <figcaption> for context if you want clean semantics.
AMP pages: Iframes in AMP require the <amp-iframe> component with explicit width and height, HTTPS source, and a placeholder element. Spotify embeds satisfy the HTTPS requirement out of the box.
Email (Gmail, Outlook, Apple Mail): Every major email client strips <iframe>. Link out to the open.spotify.com URL with a clickable play-button image instead. Substack and Beehiiv have native Spotify blocks that handle this; classic HTML newsletters do not.
"This content isn't available in your country." The track, album, or episode is geo-licensed and the visitor is outside the licensed region. No fix on the embedder side — license territories are controlled by the rights holder.
"Content unavailable" on a playlist. The playlist is set to private. Open it in Spotify, click the three dots, choose "Make public," and the embed will populate.
Embed renders blank or "Refused to display in a frame." Your Content Security Policy's frame-src directive is missing https://open.spotify.com. Add it to the directive (e.g. frame-src 'self' https://open.spotify.com;) and the iframe will load.
Mixed-content warning in the browser console. Your page is served over HTTPS but somewhere in the iframe URL you have http:// instead of https://. Always use the https:// form — the generator above does this automatically.
Player loads but tapping play does nothing. Browser autoplay policy is suppressing audio because no user gesture has hit the page yet. Tap the iframe directly, or interact with the page first. There is no embed flag that bypasses this.
iframe height clips the bottom of the player. You are using height="152" on an album, playlist, or podcast URL. Switch to height="352" for the full-art view, or change the URL to a single /track/ link if you really want the compact look.
Spotify is the right choice when the content lives natively on Spotify and you want listeners to be able to follow the artist, podcast, or playlist without leaving your page. It is the wrong choice for audio you own outright — there, a self-hosted HTML5 <audio> tag gives you full control and zero third-party JS. SoundCloud's embed is the closer parallel to Spotify but skews toward independent creators and DJ mixes. Apple Podcasts embeds work only for podcast content (no music) and require the podcast to be in Apple's directory. YouTube dominates for music with video; for audio-only, Spotify's player has the lower visual footprint and the native "follow / save" affordance.
No. The playlist must be set to public in your Spotify account before it can be embedded. Private playlists return an "unavailable" message inside the iframe. To make a playlist public, open it in Spotify, click the three dots, and choose "Make public."
Chrome, Safari, Firefox, and Edge all block autoplay of media with sound unless the user has interacted with the page first. The Spotify embed obeys this policy — visitors have to tap the play button. There is no autoplay flag that bypasses browser autoplay rules.
Append ?theme=1 to the embed URL, or use the Light toggle in the generator above. The default is theme=0 (the dark Spotify look). Only the two themes are available — Spotify does not expose custom color overrides.
Use height="152" for a single track in compact view, height="352" for albums, playlists, artists, shows, and episodes (the full-art view), or height="80" for the ultra-compact track player suitable for sidebars. The widget here picks the right height automatically based on the URL type.
Both. Use /show/{id} for the full podcast feed (listeners can browse other episodes inside the player) and /episode/{id} for a single episode (the player is locked to that episode). Spotify's Share menu on each surface returns the right link.
No. Gmail, Outlook, Apple Mail, and most other major clients strip <iframe> tags entirely. For email, link out to the open.spotify.com URL with a play-button image instead. Substack and Beehiiv have native Spotify blocks that handle this for you.
The iframe pulls roughly 600 KB of JavaScript and CSS from open.spotify.com on initial render, plus album art. Always use loading="lazy" on the iframe (already included in the generated code) so the embed only initializes when the user scrolls near it. This keeps your Largest Contentful Paint and Cumulative Layout Shift scores clean.
Yes. Spotify provides the embed feature explicitly for sharing music and podcasts on the open web. You must not modify the iframe's interface, claim ownership of the licensed content, or use embeds to promote pirated material. Full terms are in Spotify's Branding & Embed Guidelines.
Some tracks, albums, and podcast episodes are licensed only in specific regions. Visitors outside the licensed regions see the unavailable message inside the player. There is no workaround on the embedder side — geo-licensing is enforced by Spotify itself.
The iframe embed is the rendered player you drop into HTML. The oEmbed endpoint at https://open.spotify.com/oembed?url=... is a JSON API that returns iframe HTML plus title and thumbnail metadata. CMS platforms like WordPress use oEmbed to auto-render a Spotify URL pasted into the editor.
Yes. Streams initiated from the embedded player roll up into your Spotify for Artists dashboard the same way as plays from the Spotify app. Listeners must be signed into a free or premium Spotify account to hear full-length tracks; anonymous visitors get a 30-second preview.
Neither autoplay nor loop is supported by Spotify's embed iframe. The player exposes no URL parameters for playback control, and browser autoplay policies would block sound-on autoplay anyway. For background music with autoplay, a self-hosted HTML5 audio element on royalty-free audio is the standard workaround.