Streaming live at 10am (PST)

How to embed a Soundcloud playlist in a CMS item (or make any other embed dynamic)


#1

Hi

I have tried the interesting solution by Vincent to allow embed code on post page, I I do not succeed to make it work. So Vincent (or anybody else), if you can help, that would be great.

I am trying to embed a code element (see below) as you explained here:

The problem is that I still end up with written code and not what is supposed to be embedded. See here:

Here is the read-only link:
https://preview.webflow.com/preview/idt?preview=78417e56b84950e57f18aa1bf21c3e39

Go to Blog Posts template (for the embed code element, right after the Post Rich text and before the date)
or
Go to Blog Posts > Constructivism (in CMS)

Best, Manu

Sample of code I try to embed:

<iframe width="100%" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/1071456&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true&amp;visual=true"></iframe>

and

<script src="//my.visme.co/visme.js"></script><div class="visme_d" data-url="z4yjg6m1-idt-test-1" data-w="800" data-h="3945" data-domain="my"></div><p style="font-family: Arial; font-size: 10px; color: #333333" >Created using <a href="http://www.visme.co/make-infographics" target="_blank" style="color: #30a0ea"><strong>Visme</strong></a>. An easy-to-use Infographic Maker.</p>

#2

There’s an extra “p>” at the end of your iframe code but it should work nevertheless.
if you follow my previous post you should put the code inside the page in a custom code block an in the cms item code part only the part of the code that is changing from a playlist to another.

I can’t try to fix it myself because with read only links I can’t save any change in a CMS item.


#3

I put the code like this:

In the CMS it looks like this:

In the Blog Post template it looks like this:

and then like this in the embed code element:

Is it wrong?


#4

I have suppress the p> but it doesn’t change anything.

I do not know why I get the following message in the embed code element on the Blog post page:

“Custom code is not validated: incorrect code may cause this published page to not display properly.” (see picture above)


#5

Ok I have to try on my own because I can’t on your site.

So let’s try.

I add a Text field for the Soundcloud Playlists ID. Not the full code, just the playlist ID.

I grab the embed code from Soundcloud playlists, compare them and identify what’s changing between them. What’s unique is only the part in bold. That’s the ID of the playlist. All the rest of the code is the embeded player.

So I grab the IDs and add them to my CMS item Soundcloud ID field.

I do that for all my items. It’s clean, I only have the minimum, relevant data.

Now I grab any of the entire embed code and copy it.

I go to my CMS Template Page and add a Custom Code Component. I paste my entire embed code inside it. I ignore the warning yellow message because for some reason it’s almost always there even if a code is very correct.

Now I select in the code the part that we identified before, the part that’s unique, the ID of the playlist. With the ID selected, I click on the +Add Fieldpurple link on the top right of the dialog, and select my Soundcloud Playlist ID field

I end up with a dynamic code where the dynamic part is only the playlist ID, not the entire embed code. So that if I want to modify the code later, dimensions, colors, etc, it will apply to all the player. Never place the entire embed code of anything in a CMS item.

Now if it works it should work right away in the designer, fingers crosed, let’s click on Save & Close…

It works! (wow a bellybutton…)

Let’s cycle between CMS items to see if playlists change like they should

They do. Let’s publish and see…

Works like a charm!

Now I honestly don’t really know why your method don’t work. It should, even if it’s a bad practice. But as the good practice works fine, do we care? :smiley:

Most of the time, the ID of playlists, albums etc are right in the URL, like for Flickr albums etc. On Soundcloud you’re still obliged to open the embeded code box and locate the playlist ID, but that’s how it is and it’s a minor inconvenience.

As I said before, let’s try to modify the look of our player. Let’s look at the code again

That height is a little narrow isn’t it?

Let’s increase that value to 500px

Hey that girl has a face now! Much better. What else? What’s that color? Could it be controlled? Could it be… the color of the label logo?

Let’s add a color field to the Label collection and define the label color for each item.

All the colors are now defined:

back to the custom code component, let’s replace the color code with the color field.

Let’s test on our three label’s CMS items… Ok, we broke it, it doesn’t work anymore, because Webflow is adding the # character to the color. Le’ts change the color field to a text field then

And update the data

All done

Let’s update the custom code

Will it blend?

It does! The play button of the playlist is now of the color of the label’s logo

We could go on and one with customization of that code, by either changing static things, like the height of the player, or making dynamic changes, like we just did by adding a color field to our collection.


#6

Hi Vincent. I didn’t see you posted an answer. I will look at it today. Thanks for a very thorough answer!