> 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 Audio in Gutenberg

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


## Overview

Custom iFrame lets you embed Spotify audio in Gutenberg by pasting any Spotify share link into the block. Display music tracks, episodes, or podcasts 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 Audio in Elementor](/elementor/audio/embed-spotify) guide.

## Requirements

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

## Step 1: Get the Spotify URL

<Steps>
  <Step title="Open Spotify and find your audio" icon="music" title-type="p">
    Go to [open.spotify.com](https://open.spotify.com) and find the track, episode, or podcast you want to embed.
  </Step>
  <Step title="Copy the share link" icon="link" title-type="p">
    Click the three-dot menu next to the audio. Hover over **Share**. Click **Copy Song Link** for a track or **Copy Episode Link** for a podcast episode.
  </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 audio player. 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 Audio in Gutenberg

<Steps>
  <Step title="Paste the Spotify URL" icon="clipboard" title-type="p">
    Select the Custom iFrame block. In the right panel, paste the Spotify URL into the **Source URL** field. The audio player appears inside the block in the editor.
  </Step>
  <Step title="Set height and publish" icon="check" title-type="p">
    Set **Height** to 152px for a single track or 380px for a playlist. Click **Update** or **Publish**.
  </Step>
</Steps>

<Callout kind="success">
  Click **Update** or **Publish**. Your Spotify audio 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 audio in Gutenberg using the Custom iFrame plugin. From copying the share link to pasting the URL and publishing, the whole setup runs through the block editor without any code.

## Troubleshooting

**Player shows blank:** Confirm the Spotify content is public. Private tracks cannot be embedded.

**Player is cut off:** Single tracks need at least 152px. Playlists and albums need at least 380px.

**Podcast episodes do not load:** Copy the link from the three-dot menu. Avoid copying from the browser address bar.

For more help, see [iFrame Not Showing](/troubleshooting/iframe-not-showing).

## FAQ

<ExpandableGroup>
  <Expandable title="Do I need a Spotify account to embed audio?" default-open="false">
    No. Spotify's embedded player works for public content without a listener account. You do not need an API key.
  </Expandable>
  <Expandable title="Can I embed a Spotify playlist?" default-open="false">
    Yes. Copy the playlist share link and paste it into the Source URL field. Set height to at least 380px to show the full playlist player. See the [Embed Spotify Playlist in Gutenberg](/gutenberg/audio/embed-spotify-playlist) guide.
  </Expandable>
  <Expandable title="Can I embed a Spotify podcast episode?" default-open="false">
    Yes. Open the episode on Spotify. Click the three-dot menu, hover over Share, and click **Copy Episode Link**. Paste that URL into the Source URL field.
  </Expandable>
  <Expandable title="What height should I set for Spotify?" default-open="false">
    Use 152px for a single track. Use 380px or more for playlists, albums, and podcasts. Enable Auto Height to let the block resize automatically.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

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

## Related Guides

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