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

Want to embed a single track instead? See Embed Spotify Audio in Gutenberg.

Requirements

Custom iFrame plugin installed and active
WordPress with the Gutenberg block editor
A Spotify playlist URL to embed

Step 1: Get the Spotify Playlist Link

Open Spotify and find your playlist

Go to open.spotify.com and open the playlist you want to embed.

Copy the playlist link

Click the three-dot menu on the playlist. Hover over Share. Click Copy link to playlist.

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 playlist. 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 Playlist in Gutenberg

Paste the playlist URL

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.

Set the height

Set Height to at least 380px to display the full playlist player.

Click Update or Publish. Your Spotify playlist 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 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

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

Set height to at least 380px for a full playlist player. Enable Auto Height to let the block resize automatically.

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.

Confirm the playlist is set to public on Spotify. Private playlists cannot be embedded.

Also Available For

Embed Spotify Playlist in Elementor

Guide for the Elementor widget.

Embed Spotify Audio in Gutenberg

Embed a single Spotify track or episode in Gutenberg.

Was this page helpful?

Last updated today

Built with Documentation.AI