Soundcloud image cropped and with buttons

Hi there,

I am using four soundcloud blocks in one of my projects. Sadly, all the images are being cropped on the desktop version. On the mobile version, two are showing as the full image so it's obviously possible. However, on the mobile version, all of the images are covered with these annoying buttons asking whether the user wants to listen in browser or on soundcloud, which blocks the images. I have tried using the special embed links from soundcloud but this does not result in the full image, even though it clearly displays as though it will on the soundcloud preview. And it also stops the file from playing. Somewhat infuriating! Any help would be truly fabulous. Here is my soundcloud profile so you can see the differences in image: 

Can you share your website and the embed code you are using?

hi ziggy. thanks so much for your response.

the website page with the souncloud blocks is https://www.siangriffin.com/home/ofkinshipandconspiracy

i'm currently using the following URLs for the four poems and have included the embed code for each one (though when I use these the track doesn't play at all)

https://soundcloud.com/user-437779713-558265231/the-back-of-our-eyelids

<iframe width="100%" height="600" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1833583401&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false&visual=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/user-437779713-558265231" title="Siân Griffin" target="_blank" style="color: #cccccc; text-decoration: none;">Siân Griffin</a> · <a href="https://soundcloud.com/user-437779713-558265231/the-back-of-our-eyelids" title="The Back of Our Eyelids" target="_blank" style="color: #cccccc; text-decoration: none;">The Back of Our Eyelids</a></div>

https://soundcloud.com/user-437779713-558265231/strategy

<iframe width="100%" height="600" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1832858211&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false&visual=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/user-437779713-558265231" title="Siân Griffin" target="_blank" style="color: #cccccc; text-decoration: none;">Siân Griffin</a> · <a href="https://soundcloud.com/user-437779713-558265231/strategy" title="Strategy" target="_blank" style="color: #cccccc; text-decoration: none;">Strategy</a></div>

https://soundcloud.com/user-437779713-558265231/november

<iframe width="100%" height="600" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1391397097&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false&visual=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/user-437779713-558265231" title="Siân Griffin" target="_blank" style="color: #cccccc; text-decoration: none;">Siân Griffin</a> · <a href="https://soundcloud.com/user-437779713-558265231/november" title="November" target="_blank" style="color: #cccccc; text-decoration: none;">November</a></div>

https://soundcloud.com/user-437779713-558265231/on-destruction

<iframe width="100%" height="600" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/858578032&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false&visual=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/user-437779713-558265231" title="Siân Griffin" target="_blank" style="color: #cccccc; text-decoration: none;">Siân Griffin</a> · <a href="https://soundcloud.com/user-437779713-558265231/on-destruction" title="On Destruction" target="_blank" style="color: #cccccc; text-decoration: none;">On Destruction</a></div>

So you want the soundcloud embeds to be square?

I would like them to show the full picture, as it does when i go to the embed preview in soundcloud for each one. i have a attached a screen shot of this. thanks so much for your help!

Square could be tricky with the embed, you can adjust this value to get closer to square, but because of the width generally needs to be a percentage value to adapt the screen it's going to be hard to match them up. Incidentally using 100% or another percentage won't work with the height! You could use 400px and 400px but you might have to play around with the block positions to look good.

Hi Ziggy. I just entered the embed codes changing the width and height to both 400px. This hasn't changed the size/shape of the image and it also now won't play the file, which was a problem I had when using the embed codes when I first tried. One good thing though is that it has taken the annoying "play in souncloud/play in browser" buttons off which totally blocked the image (strangely this only happens on the mobile version). Amy further suggestions would be most welcome. I'm sure there has to be a way to make this work!

Does anyone else have any ideas?