> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Embed Spotify Playlist in Gutenberg

Step-by-step guide to embed Spotify playlist in Gutenberg using the Custom iFrame WordPress plugin. No API key needed. No coding required.


## Overview

Custom iFrame lets you embed Spotify playlist in Gutenberg by pasting any Spotify share link into the block. Display full playlists on your WordPress page without an API key.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Using Elementor instead? Follow the [Embed Spotify Playlist in Elementor](/elementor/audio/embed-spotify-playlist) guide.

Want to embed a single track instead? See [Embed Spotify Audio in Gutenberg](/gutenberg/audio/embed-spotify).

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- A Spotify playlist URL to embed

## Step 1: Get the Spotify Playlist Link

<Steps>
  <Step title="Open Spotify and find your playlist" icon="music" title-type="p">
    Go to [open.spotify.com](https://open.spotify.com) and open the playlist you want to embed.
  </Step>
  <Step title="Copy the playlist link" icon="link" title-type="p">
    Click the three-dot menu on the playlist. Hover over **Share**. Click **Copy link to playlist**.
  </Step>
</Steps>

## Step 2: Install the Plugin and Add the Block

<Steps>
  <Step title="Install and activate the plugin" icon="download" title-type="p">
    Go to your WordPress dashboard. Go to **Plugins > Add New**. Search for **Custom iFrame by Coderz Studio**, click **Install Now**, then click **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button"
      width="1024"
      height="396" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the playlist. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button. Search for **Custom iFrame**. Click the block to add it to the page.
  </Step>
</Steps>

## Step 3: Embed Spotify Playlist in Gutenberg

<Steps>
  <Step title="Paste the playlist URL" icon="clipboard" title-type="p">
    Select the Custom iFrame block. In the right panel, paste the Spotify playlist URL into the **Source URL** field. The playlist player appears inside the block in the editor.
  </Step>
  <Step title="Set the height" icon="move-vertical" title-type="p">
    Set **Height** to at least 380px to display the full playlist player.
  </Step>
</Steps>

<Callout kind="success">
  Click **Update** or **Publish**. Your Spotify playlist is now live on your WordPress site.
</Callout>

For all block settings, see the [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup) guide.

This guide showed you how to embed Spotify playlist in Gutenberg using the Custom iFrame plugin. From copying the playlist share link to pasting the URL and publishing, the whole setup runs through the block editor without any code.

## FAQ

<ExpandableGroup>
  <Expandable title="Do I need a Spotify account to embed a playlist?" default-open="false">
    No. Spotify's embedded player works for public playlists without an account. You do not need an API key.
  </Expandable>
  <Expandable title="What height should I set for a playlist?" default-open="false">
    Set height to at least 380px for a full playlist player. Enable Auto Height to let the block resize automatically.
  </Expandable>
  <Expandable title="Can I embed a single Spotify track instead?" default-open="false">
    Yes. Copy the track share link and paste it into Source URL. Set height to 152px for a compact player. See [Embed Spotify Audio in Gutenberg](/gutenberg/audio/embed-spotify).
  </Expandable>
  <Expandable title="The playlist player shows blank. What should I check?" default-open="false">
    Confirm the playlist is set to public on Spotify. Private playlists cannot be embedded.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Spotify Playlist in Elementor" href="/elementor/audio/embed-spotify-playlist" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed Spotify Audio in Gutenberg" href="/gutenberg/audio/embed-spotify" icon="music" horizontal={false}>
    Embed a single Spotify track or episode in Gutenberg.
  </Card>
</Columns>

## Related Guides

- [Embed Audio in Gutenberg - Overview](/gutenberg/embed-audio)
- [Embed Spotify Audio in Gutenberg](/gutenberg/audio/embed-spotify)
- [Embed SoundCloud in Gutenberg](/gutenberg/audio/embed-soundcloud)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)