What the embed actually is

An iframe pointing at Spotify. Your page reserves a rectangle; Spotify fills it with a player it hosts, styles and updates. Nothing about the audio passes through your server, and no file is copied to your site.

That division explains most of the surprises further down this page. You own the frame: its width, its height, its corners, whether it loads immediately or when scrolled into view. Spotify owns everything inside it, including who is allowed to hear a full track.

Six kinds of item can be embedded: a track, an album, an artist, a playlist, a podcast show, or a single podcast episode. The procedure is the same for all six.

Get the code

Two routes exist and Spotify documents them separately, which is why instructions found online contradict each other. The developer documentation describes the web player at open.spotify.com. The artist support pages describe the desktop application. Both work and both produce the same tag. The mobile apps do not offer it.

1. Open the item

   Find the track, album, artist, playlist, show or episode in the web player or the desktop app.

2. Open the embed menu

   Right-click its title, or open its options menu, then Share, then the entry beginning with Embed — the wording follows the item, so it may read Embed playlist or Embed episode.

3. Copy

   A small panel opens with sizing options. Adjust them or leave them, then click Copy. A complete iframe tag goes to your clipboard.

4. Paste and publish

   Put the tag into your page’s HTML where the player belongs, save, publish, then load the page and press play. Test it signed out as well as signed in — the two are not the same page.

Anatomy of the tag

This is the shape Spotify’s own oEmbed service returns. Reading it once saves most of the troubleshooting later, because two of these attributes decide whether the player works at all.

<iframe
  src="https://open.spotify.com/embed/episode/7makk4oTQel546B0PZlDM5"
  width="100%"
  height="152"
  title="Spotify Embed: My Path to Spotify: Women in Engineering"
  style="border-radius: 12px"
  frameborder="0"
  allowfullscreen
  allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
  loading="lazy">
</iframe>

src

The player URL. Its shape is open.spotify.com/embed/{type}/{id}, where type is track, album, artist, playlist, show or episode, and id is the identifier from the item’s normal Spotify link. Change the type and the id and you have swapped the content — no need to regenerate anything.

allow

Load-bearing A permissions list handed to the frame. encrypted-media is the one that matters: Spotify’s documentation states that an embed whose iframe has had encrypted-media removed will only ever stream a preview. Optimisers, security plugins and hand-tidying all strip it. If a player is stuck on previews, look here first.

height

Chooses the layout rather than just the size. Spotify’s generator returns a compact player at 152 and a taller one, with artwork and a track list, around 352. Values in between produce a cropped player, not an intermediate one.

width

Leave it at 100% and let your own layout decide the real width. A fixed pixel width is the usual reason an embed overflows on a phone.

title

What a screen reader announces when it reaches the frame. Spotify fills it with the item’s name. Generators that omit it leave an unlabelled frame, which is a genuine accessibility failure and costs nothing to avoid.

loading

Performance lazy holds the frame back until it is close to the viewport. Worth keeping on any page with more than one embed: each player is a full application, and loading several at once is felt.

style, frameborder, allowfullscreen

Cosmetic and legacy. border-radius rounds the corners, frameborder is an old attribute superseded by CSS, allowfullscreen matters only for video podcast episodes. None of them affect playback.

Where to paste it

Every site builder has somewhere to put raw HTML. The wording differs and the menus move, so the thing to look for is the capability rather than a particular label: a block, element or widget described as HTML, Embed, Code or iframe.

• Hand-written HTML. Paste the tag into the markup at the point the player belongs. Nothing else to do.
• WordPress. A Custom HTML block. Pasting the plain Spotify link into an ordinary paragraph block also works — WordPress recognises it and builds the embed for you, though you then have no control over the attributes above.
• Wix, Squarespace, Webflow, Notion and similar. Add the platform’s embed or code element and paste the tag into it. Editors that offer a URL field instead of a code field will accept the Spotify link directly.

Some builders rewrite pasted markup and quietly drop iframe attributes they do not recognise. If a player works in a plain HTML file but only previews once inside your CMS, view the published page’s source and compare its allow attribute with what you pasted.

Why it only plays 30 seconds

The most common complaint about Spotify embeds, and the one with the least satisfying answer: full playback is not a property of your page. It is a property of the person visiting it, and every condition below has to hold at the same time.

• The iframe still has encrypted-media

  Documented by Spotify. Strip it and the embed is limited to a preview, whoever is watching. Check the published page, not your draft.

• The browser is one Spotify supports

  Spotify names Chrome, Firefox, Edge, Opera and Safari. Outside that list, full episodes and songs may not play at all.

• There is a Premium session in that browser

  This is the one that catches people. Being signed in to the Spotify desktop application does nothing for the embed; the browser needs its own signed-in Premium session. A free account gets previews.

• It is a real desktop browser

  Embedded web views — the browser inside another app, Electron shells, in-app browsers — behave as unauthenticated and return previews regardless of the account.

Spotify documents the first two conditions. The last two are the answer given consistently by Spotify’s own developer forum rather than by its documentation, which is worth knowing before you spend an afternoon on it. There is also a console message to look for: Spotify was not able to play encrypted media.

The practical consequence is that you cannot promise your visitors full tracks. Design the page for the preview and treat full playback as a bonus for the subset of visitors who happen to qualify. This is one reason a plain MP3 file still outperforms a streaming embed when the point is that someone actually hears the music.

Cookies, consent and the Widget Terms

Embedding the player puts you under Spotify’s Widget Terms of Use. Almost nothing written about Spotify embeds mentions this, and the obligations are not theoretical — particularly the cookie one, if any of your visitors are in Europe.

Spotify can revise these terms, and the current text always sits at developer.spotify.com. The summary above is a reading of them, not legal advice.

Generating embeds automatically

Copying tags by hand stops scaling the moment you have a page per release or per episode. Spotify exposes an oEmbed endpoint that turns any Spotify link into a ready-made iframe. It needs no key and no account.

GET https://open.spotify.com/oembed?url={url-encoded Spotify link}

The response is JSON, and the html field is the finished tag:

{
  "html": "<iframe width=\"100%\" height=\"152\" ...></iframe>",
  "width": 456,
  "height": 152,
  "title": "My Path to Spotify: Women in Engineering",
  "thumbnail_url": "https://i.scdn.co/image/...",
  "thumbnail_width": 300,
  "thumbnail_height": 300,
  "provider_name": "Spotify",
  "type": "rich",
  "version": "1.0"
}

Two details make it more useful than it first looks. The title and thumbnail_url come back with the tag, so one request gives you the artwork and the item’s real name for your own layout as well. And a bad or removed link answers 404, which is a cheap way to catch dead embeds before a visitor does.

The reference lists podcast shows, episodes, artists, albums and tracks as accepted inputs.

Driving the player from JavaScript

If a page needs to change what the player is holding — a track list where clicking a row loads that track into one player rather than opening twenty of them — there is an official iFrame API. One script tag, one placeholder element, one callback.

<div id="embed-iframe"></div>
<script src="https://open.spotify.com/embed/iframe-api/v1" async></script>

window.onSpotifyIframeApiReady = (IFrameAPI) => {
  const element = document.getElementById('embed-iframe');
  const options = { uri: 'spotify:episode:7makk4oTQel546B0PZlDM5' };

  IFrameAPI.createController(element, options, (EmbedController) => {
    EmbedController.addListener('ready', () => {
      // the player is live
    });
  });
};

The placeholder element is replaced by the player. The controller then exposes play, pause, resume, togglePlay, restart, seek and destroy, plus loadEntity to swap in different content without rebuilding anything. Events come back the other way: ready, playback_started, and playback_update, which carries position and duration in milliseconds and is what you would drive a custom progress display from.

One limit worth designing around: Spotify notes that starting playback programmatically may not work everywhere, because browsers block audio that begins without a user action. Safari in particular. Anything that has to make a sound should start from a click.

Questions