> 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 Elementor

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


## Overview

Custom iFrame lets you embed Spotify playlist in Elementor by pasting any Spotify share link into the widget. 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 Gutenberg WordPress instead? Follow the [Embed Spotify Playlist in Gutenberg WordPress](/gutenberg/audio/embed-spotify-playlist) guide.

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

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- Elementor installed
- A Spotify playlist URL to embed

## Video Tutorial

<iframe
  src="https://www.youtube.com/embed/zfHvNiNaZTU"
  width="720"
  height="405"
  frameBorder="0"
  allowFullScreen
/>

## 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: Add the Custom iFrame Widget

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the playlist. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the widget onto your page" icon="move" title-type="p">
    Search for **Custom iFrame** in the Elementor widget panel. Drag the widget into your layout.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776867149/getting-started/elementor-setup/Guide-Add-Custom-iFrame.webp"
      alt="Custom iFrame widget being dragged from the Elementor panel into a page section in the editor"
      width="1024"
      height="337" priority={true} fetchPriority="high" />
  </Step>
</Steps>

## Step 3: Embed Spotify Playlist in Elementor

<Steps>
  <Step title="Paste the playlist URL" icon="clipboard" title-type="p">
    In the Content tab, paste the Spotify playlist URL into the **Source URL** field. The playlist player appears in the editor.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776912410/elementor/audio/spotify-playlist/paste-spotify-playlist-url.webp"
      alt="Custom iFrame widget in Elementor editor showing Spotify playlist URL in Source URL field with live Spotify playlist player preview"
      width="1024"
      height="437" priority={true} fetchPriority="high" />
  </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>

## Step 4: Customize and Configure Settings

For styling, smart loading, and advanced options, see the [Style Custom iFrame](/getting-started/styling) guide. Adjust dimensions, backgrounds, borders, and more.

## Step 5: Save and Publish

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

Want to add a custom watermark (Pro), device frame (Pro), or fine-tune widget behavior? See the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) guide for all widget options.

This guide showed you how to embed Spotify playlist in Elementor using the Custom iFrame plugin. From copying the playlist share link to pasting the URL and publishing, the whole setup runs through the Elementor 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 iFrame 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 Elementor](/elementor/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 Gutenberg WordPress" href="/gutenberg/audio/embed-spotify-playlist" icon="layout" horizontal={false}>
    Guide for the WordPress block editor.
  </Card>
  <Card title="Embed Spotify Audio in Elementor" href="/elementor/audio/embed-spotify" icon="music" horizontal={false}>
    Embed a single Spotify track or episode in Elementor.
  </Card>
</Columns>

## Related Guides

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