Generator Tools
Spotify Embed Generator
Turn any Spotify track, album, playlist, artist, podcast show, or episode URL into a responsive iframe embed code in your browser.
Detected track ID: 4cOdK2wGLETKBW3PvgPWqT
Embed options
Recommended height
352px
Based on the content type and compact toggle.
Iframe title
Live preview
Loads the embed from open.spotify.com only when you click below.
Responsive iframe
HTML embed
Paste into any HTML, blog, or CMS surface that allows iframes.
<iframe style="border-radius:12px;width:100%;max-width:100%" src="https://open.spotify.com/embed/track/4cOdK2wGLETKBW3PvgPWqT?utm_source=generator" width="100%" height="352" frameborder="0" allowfullscreen allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy" title="Spotify embed player"></iframe>
React / JSX
JSX iframe
Drop into a Next.js, Vite, Remix, or CRA component.
<iframe
style={{ borderRadius: 12, width: "100%", maxWidth: "100%" }}
src="https://open.spotify.com/embed/track/4cOdK2wGLETKBW3PvgPWqT?utm_source=generator"
width="100%"
height={352}
frameBorder={0}
allowFullScreen
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy"
title="Spotify embed player"
/>Embed source URL
iframe src attribute
The exact URL the embed iframe loads.
https://open.spotify.com/embed/track/4cOdK2wGLETKBW3PvgPWqT?utm_source=generator
Share link
open.spotify.com share URL
The plain link, no tracking, for chats and emails.
https://open.spotify.com/track/4cOdK2wGLETKBW3PvgPWqT
Spotify URI
Native Spotify URI
Opens directly in the Spotify desktop or mobile app.
spotify:track:4cOdK2wGLETKBW3PvgPWqT
Spotify embed cheat sheet
- Default height is 352px for albums, playlists, artists, and shows.
- Compact height is 152px and only applies to tracks and podcast episodes.
- Allowed origins: only https pages can embed Spotify. Spotify hides the player on http.
- Private playlists cannot be embedded. Switch the playlist to public in Spotify first.
- Autoplay is allowed only after the user clicks Play. Browsers ignore embed autoplay parameters.
How to use
- Paste any open.spotify.com link, a spotify: URI, or a bare 22 character ID into the input at the top.
- If you pasted only a 22 character ID, pick the content type (track, album, playlist, artist, show, or episode) so the tool knows which embed URL to build.
- Toggle Compact player for the short single-row layout on tracks and podcast episodes, or leave it off for the full rich player.
- Pick Responsive width for blog and CMS layouts, or enable Custom dimensions to set a fixed width, height, and screen reader title.
- Copy the responsive HTML iframe, the JSX version, the embed source URL, the share link, or the Spotify URI, and paste it where you need it.
About this tool
Spotify Embed Generator turns any Spotify share URL, Spotify URI, or 22 character base62 ID into a properly formed iframe embed for your website, blog, newsletter, portfolio, or documentation page. Paste an open.spotify.com link of any flavor (track, album, playlist, artist, podcast show, podcast episode), an internationalized URL like open.spotify.com/intl-de/track/<id>, an already-built embed URL, or a spotify:track:<id> style URI and the tool detects the content type and ID with a strict 22-character base62 validator that rejects malformed input rather than silently failing. Pick whether the player renders responsive (width 100% so it fits any blog or CMS container) or at a fixed width, toggle compact mode to switch tracks and podcast episodes to the short 152px single-row layout that Spotify shows when theme=0 is set, override the recommended height with a custom value, and supply an iframe title that screen readers read aloud. The output panel emits five ready-to-copy snippets: a responsive HTML iframe with width 100% and Spotify's standard 12px rounded corners, a fixed-size HTML iframe at the dimensions you picked, a JSX iframe with camelCased attributes for React, Next.js, Vite, Remix, or CRA, the raw embed source URL the iframe loads, and the plain open.spotify.com share link for chats and emails. The allow attribute matches what Spotify ships in its own embed dialog (autoplay, clipboard-write, encrypted-media, fullscreen, picture-in-picture) so in-player share buttons and full-screen video on podcast episodes work as designed, and lazy loading is enabled by default so embeds further down a page do not block the initial render. A live preview is opt in: nothing is requested from Spotify until you click Show preview, at which point the iframe loads exactly as it would on a published page. Useful for music blogs sharing a featured single, indie artists embedding their latest release on a portfolio site, podcasters dropping an episode player on a show notes page, label and publicist newsletters, Notion pages, WordPress posts, fan sites, and developers building a music or podcast directory. The widget runs entirely in your browser. No Spotify Web API call is made, no OAuth token is required, and the URL or URI you paste never leaves your device.
Free to use. Works in your browser. No signup, no login.
Related tools
You may also like
YouTube Embed Generator
Custom YouTube iframe with start/end times, autoplay, loop, captions, and a responsive wrapper.
Open tool
GeneratorHTML5 Video Embed Generator
Build a responsive HTML5 video tag with sources, poster, captions, and JSX output.
Open tool
GeneratorHTML Iframe Generator
Build accessible, responsive iframe code with sandbox, allow, and referrerpolicy attributes.
Open tool
GeneratorQR Code Generator
QR codes for URLs, text, email, phone, SMS, WiFi, and vCard with PNG and SVG download.
Open tool
GeneratorSocial Share Link Generator
Build share-this-URL links for 12 networks with HTML snippets and live limit checks.
Open tool
DeveloperURL Parser
Break a URL into protocol, host, path, query params, and fragment with decoded values.
Open tool