Jump to content

Basic Soundcloud Embed code not working

Recommended Posts

I'm using the basic Soundcloud Embed code from Soundcloud on my free account with them.  I'm going to Share > Embed > copy and pasting that embed code in to the SqS Soundcloud block embed section (</>).  It adds it and creates the playlist, but everything is grayed out and unclickable.  I am not modifying the embed code at all.

If I use just the Share link from Soundcloud and paste that in to the SqS Soundcloud block, it allows me to play the playlist.  

SqS customer support is less than helpful, as they think it's a custom code issue. But it's a feature they promote and is in their help pages!
Any reason why this is not playing when added?

Link to comment

Would you mind to share your current page url so we can have a look at what going on?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
19 minutes ago, ElizaHK said:

I'm actually having the same issue ... can anyone help? This is my music page: 

https://www.elizahopekenyon.com/music

I've embedded the code but it's not playing on SQSP.

 

I can see it played here

image.png.7f0315478cc9110c2c39d0b732f109d3.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
2 hours ago, ElizaHK said:

It's so random ... it's now playing on the Music page but not the homepage ... 

https://www.elizahopekenyon.com

I have no idea why or why not ... 

I saw this div blocked the iframe from being clicked

image.thumb.png.189d14621a5b42d675130c1dfbf84379.png

Would you mind to send me the snippet they gave you?

Sensei did you resolve it?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

This is what I got from Sound Cloud: 

 

<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/832779529&color=%23a27134&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/elizasong" title="Eliza Hope Kenyon" target="_blank" style="color: #cccccc; text-decoration: none;">Eliza Hope Kenyon</a> · <a href="https://soundcloud.com/elizasong/saraswati" title="Saraswati" target="_blank" style="color: #cccccc; text-decoration: none;">Saraswati</a></div>

Link to comment
9 hours ago, ElizaHK said:

This is what I got from Sound Cloud: 

 

<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/832779529&color=%23a27134&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/elizasong" title="Eliza Hope Kenyon" target="_blank" style="color: #cccccc; text-decoration: none;">Eliza Hope Kenyon</a> · <a href="https://soundcloud.com/elizasong/saraswati" title="Saraswati" target="_blank" style="color: #cccccc; text-decoration: none;">Saraswati</a></div>

There is some thing odd with the sqs-sound-block style, so feel free to have this fix, adding using Settings->Custom Css

.sqs-block-soundcloud .sqs-intrinsic {
  padding: 0 !important;
}
.sqs-block-soundcloud .sqs-intrinsic iframe {
  position: static !important;
}
.sqs-block-soundcloud .sqs-intrinsic .sqs-intrinsic-content {
  position: static !important;
}

image.thumb.png.1efe0f83e5327d703eecc3a0bf8199b1.png

Edited by bangank36
change

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Hi Senseiyou can used my solution above to fix the issue 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 7/21/2020 at 7:54 PM, derricksrandomviews said:

Well, it seems either SS or Bandcamp has made a liar out of me today. I just embedded the full album on my site using the share/embed code in a code block not an embed block and it worked just fine. The embed block worked with the email  url but the player had too much empty space in it. 

Would you mind to check my fix above or post your url of the site you are working?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
27 minutes ago, SourceSong said:

Hi, Bangok36 - I injected this custom CSS, and now it turned a playlist code into one song. It plays now, which is half the fix, but doesn't show the entire 3 song set.  Thanks!

What is your current implementation url?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 3 months later...
8 hours ago, Bobinson said:

I am experiencing the same issue where my playlist now plays back, but is reduced to one song.  Is there a fix you can recommend?  Thanks!

Please share your current site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 weeks later...

hi bangank36, I'm having the exact same issue.  I've just launched a new website, and I'm using the Soundcloud Embed code to add songs to my site, via Share > Embed > copy and paste in to the SqS Soundcloud block embed section (</>).

I've done that for 3 songs, but they will not play: https://www.joecirello.com/music

I see you provided code above to help fix this, but I don't understand where it needs to go:

image.thumb.png.b333a908717b8ffce58e77dde917c56a.png

Can you help me understand how to apply this fix?  Where do I find "Settings->Custom Css"?

Also, when looking on mobile, these SoundCloud blocks are the wrong size - is there a way to fix that too?  Thank you in advance!

Link to comment
On 11/16/2020 at 6:31 AM, OhSoJoe said:

hi bangank36, I'm having the exact same issue.  I've just launched a new website, and I'm using the Soundcloud Embed code to add songs to my site, via Share > Embed > copy and paste in to the SqS Soundcloud block embed section (</>).

I've done that for 3 songs, but they will not play: https://www.joecirello.com/music

I see you provided code above to help fix this, but I don't understand where it needs to go:

image.thumb.png.b333a908717b8ffce58e77dde917c56a.png

Can you help me understand how to apply this fix?  Where do I find "Settings->Custom Css"?

Also, when looking on mobile, these SoundCloud blocks are the wrong size - is there a way to fix that too?  Thank you in advance!

Please follow this instruction to find the Custom css and check if the code helps

http://beyondspace.tk/2020/11/01/squarespace-101-how-to-inject-custom-code/#custom-css

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
4 hours ago, zillaxillacilla said:

bangank36, I'm having the same issue as well. I pasted the code in, but it only seems to have resized the soundcloud block. Here is my website: https://www.kevinlong.me/

 

Thank you!

where can I see the soundcloud blocks

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 weeks later...

bangank36, are you suggesting the code be injected in the Settings at the page level or at the site level?

I, too, am having the issue that when I embed a full album playlist player on a website using the </> feature instead of just the playlist URL, the playlist appears on the web page as an un-clickable image.

Unfortunately, I can't share the URL here as it is a password-protected page on an artist's website mean to share music that is not available to the public yet.  But I am following to see if folks find a solution to this problem, as the playlist that appears when using the URL is not as aesthetically pleasing as the one that appears using the </> feature.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.