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 guide.

Requirements

Custom iFrame plugin installed and active
WordPress with the Gutenberg block editor
A Spotify track, episode, or podcast URL to embed

Step 1: Get the Spotify URL

Open Spotify and find your audio

Go to open.spotify.com and find the track, episode, or podcast you want to embed.

Copy the share link

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 2: Install the Plugin and Add the Block

Install and activate the plugin

Go to your WordPress dashboard. Go to Plugins > Add New. Search for Custom iFrame by Coderz Studio, click Install Now, then click Activate.

WordPress Add New Plugin screen showing Custom iFrame by Coderz Studio in search results with Install Now button

Open your page in the block editor

Go to the page or post where you want the audio player. Click Edit to open the Gutenberg block editor.

Add the Custom iFrame block

Click the Add Block button. Search for Custom iFrame. Click the block to add it to the page.

Step 3: Embed Spotify Audio in Gutenberg

Paste the Spotify URL

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.

Set height and publish

Set Height to 152px for a single track or 380px for a playlist. Click Update or Publish.

Click Update or Publish. Your Spotify audio is now live on your WordPress site.

For all block settings, see the Set Up Custom iFrame in Gutenberg 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.

FAQ

No. Spotify's embedded player works for public content without a listener account. You do not need an API key.

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 guide.

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.

Use 152px for a single track. Use 380px or more for playlists, albums, and podcasts. Enable Auto Height to let the block resize automatically.

Also Available For

Embed Spotify Audio in Elementor

Guide for the Elementor widget.

Embed Spotify Playlist in Gutenberg

Embed full Spotify playlists in Gutenberg.

Was this page helpful?

Last updated today

Built with Documentation.AI