Troubleshooting Spotify Embedding Issue in Webflow CMS: Recent Changes Explained

Hey there, Webflow users! We've got an interesting issue on our plate today. It appears some of you have been struggling with embedding Spotify playlists into your CMS posts. One day it's business as usual, and the next, you're getting a "URL can't be embedded" message. Frustrating, right? But don't worry, we're here to help. In this article, we'll dig into this issue and provide you with a solution to get your groovy tunes up and running on your Webflow site again.

The Problem

From what we've gathered on the Webflow forum, the issue seems to be quite specific. Some users have reported that they've previously been successful in embedding Spotify links into their CMS posts without any problem. However, suddenly, they're unable to do so. The error message they're getting is "Sorry, this URL can't be embedded." Now, that's strange, isn't it?

Even more puzzling, this issue seems to be affecting Spotify playlists specifically, not single tracks. And it's happening regardless of whether you're trying to embed the playlist within a rich text field or not. So, what gives?

The Investigation

When troubleshooting an issue like this, it's best to start by isolating the problem. A helpful suggestion from the Webflow forum was to test the embed on embed.ly, since Webflow uses the embed.ly API for embeds within the Rich Text Field. If an error is thrown there too, we'd have a clue.

Another key point that was brought up is the method of embedding. Some users reported success with embedding the content using the "embed code" from Spotify, or simply pasting the "Song link" into the multimedia URL option in the post body.

The Solution

For those who have been successfully embedding Spotify playlists using the link method, it seems there's a workaround. You can use the "embed code" option from Spotify, although it doesn't offer the same flexibility with size adjustments.

Here's how you do it:

Go to the playlist you want to embed on Spotify.
Click on the three dots (...), then select 'Share' and 'Embed Playlist'.
Copy the iframe code that appears.
Paste this code into your CMS post on Webflow.

For size adjustments, you can manually change the height and width in the code. This might look something like this:

Note the width="300" and height="380" parts of the code. You can adjust these numbers to fit your specific needs.

Keep in Mind

While this solution works, it's worth noting that the issue still seems to be unresolved at the root. It's unclear whether the problem lies with Webflow, Spotify, or a combination of both. In the meantime, using the embed code option is the best workaround. We'll keep an eye out for any updates or fixes that may come along, so stay tuned!

The Webflow-Embed.ly-Spotify Secret: Dynamic Embedding

For those feeling a bit adventurous and want to take their Spotify embedding game to the next level, here's a top tip that might be a game-changer: Dynamic Embedding. This approach is a little more advanced, but it's a powerful way to automate the embedding process for CMS collections with multiple items.

Here's how you can do it:

Create a new plain text field in your CMS Collection for 'Spotify Embed Code'.
When adding a new item to your Collection, go to your Spotify playlist, follow the steps to get the 'Embed Code', and paste it in this new field.
Now, on your Webflow page, add an 'Embed' element where you want the Spotify playlist to appear.
Within this Embed element, delete any default code and click on 'Add Field' in the top right corner.
Select the 'Spotify Embed Code' field from the dropdown. It's going to look something like this: <div>{Spotify-Embed-Code}</div>.
Save and publish. Voila! Your Spotify playlist should now be dynamically embedded in your Collection items.