Question

embedded Player does not appear on mobiles

  • 3 November 2014
  • 25 replies
  • 992 views

Hi,

I've embedded a soundcloud player into my website. However the player does not appear when the website is opened from a mobile phone or tablet.
Does anybody have an idea how to solve that?

25 replies

Userlevel 7
Badge +3
Hi there,

Thank you for writing in about this. Can you provide the link to your website so we can take a look and investigate this for you from here, please?

Thanks & all the best,
Mathis
Hi Mathis,
here's the site: www.songsandmoments.de
right now there are myspace players embedded, but they don't work on mobiles either.
Let me kow if you want me to embed the souncloud player again, before you check the site.
The audios are on the page 'Für die Ohren'.

Thanks a lot for your help.

Karla
Userlevel 7
Badge +2
Hi Mathis,
here's the site: www.songsandmoments.de
right now there are myspace players embedded, but they don't work on mobiles either.
Let me kow if you want me to embed the souncloud player again, before you check the site.
The audios are on the page 'Für die Ohren'.

Thanks a lot for your help.

Karla

Hi Karla,

Thanks for the link, can you please go ahead and embed the tracks? Let us know when it's done and i'll take a look. Also, let me know if you've checked on both Android and iPhone.

Thanks again!
Gina
Hi Gina,
I've embedded the player with my track list now.
It doesn't work on my smartphone (Android) nor on an I-Pad.
Thanks!
Karla
Userlevel 7
Badge +3
Hi Karla,

Thanks for letting us know. It looks like you're currently working on that page and have now embedded a single track. I can see that you have two playlists up on your profile on SoundCloud, both of which seem to have the same name (which makes it a bit more difficult to distinguish the two).

Now, in order to embed the playlist that has "Roxanne" as the first track in it, you would need to use the following iframe code in order to embed the playlist:
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/58029261&amp;auto_pl...;

Here is how this looks like on SoundCloud upon clicking the "Share" button, then choosing "Embed":



Hope this helps! Please let me know if you have any other questions.

Cheers,
Mathis
Hey Mathis,

thanks for the code, but unfortunately it still doesn't work on the mobile.

How come, that the code you gave me is so different from the code I got from the soundcloud page?

The good thing about your version is, that it shows all 6 titles, not just the first three.

Is it possible to get the player version, where I can have a pic in the backgound instead at the side, like in your version?

And can I make adjustments in the code, so that the user number is invisible, as well as the number of clicks and the link to soundcloud. Would be great if it could be as 'pure' as possible.

Wow, lots of questions for you. Sorry for that!

Thanks a lot for your help.
Karla
Userlevel 7
Badge +3
Hey Mathis,

thanks for the code, but unfortunately it still doesn't work on the mobile.

How come, that the code you gave me is so different from the code I got from the soundcloud page?

The good thing about your version is, that it shows all 6 titles, not just the first three.

Is it possible to get the player version, where I can have a pic in the backgound instead at the side, like in your version?

And can I make adjustments in the code, so that the user number is invisible, as well as the number of clicks and the link to soundcloud. Would be great if it could be as 'pure' as possible.

Wow, lots of questions for you. Sorry for that!

Thanks a lot for your help.
Karla

Hi Karla,

Thanks for writing back and for your questions. Hmm, let's see. So I do hear sound here is what I see when I visit your website via my computer, however I don't see the embedded player. This seems to be hidden by other parts of code on your homepage. Hence, this probably also won't show on your mobile device.

In order to test things like that, I usually use a html test page like http://htmledit.squarefree.com/ - here, edits to the code are immediately applied with no need to save & refresh. As you can see when you try the embed code there, it will show up just fine.



I am currently not sure from where you got the code that would show only three tracks - can you guide me to that?

You also asked about the background image on the embed - yes, this is possible and available to all users. We offer different designs for our embedded players, all of which are explained here. Hopefully, this will shed some light on the matter.

It currently isn't possible to hide the SoundCloud logo or number of users - sorry.

Other then that, please note that our embedded players won't automatically start playing on mobile devices. This is a set rule for mobile and currently cannot be changed.

Does this make sense, or is there anything else we can help with?

Cheers,
Mathis
Hey Mathis,

thanks for the code, but unfortunately it still doesn't work on the mobile.

How come, that the code you gave me is so different from the code I got from the soundcloud page?

The good thing about your version is, that it shows all 6 titles, not just the first three.

Is it possible to get the player version, where I can have a pic in the backgound instead at the side, like in your version?

And can I make adjustments in the code, so that the user number is invisible, as well as the number of clicks and the link to soundcloud. Would be great if it could be as 'pure' as possible.

Wow, lots of questions for you. Sorry for that!

Thanks a lot for your help.
Karla

Hey Mathis,

sorry for the confusion. We are talking about two different pages. Let me sort a bit for clarity:

1. problems on mobiles:

You are referring to the start page. There is a hidden player on autostart, which doesn't work on mobiles. I know that. So everything is ok here.

The problem I am referrig to is the player on page 'Für die Ohren'. I've embedded your code and the player is now working on an IPad (IOS, Safari) but still not working on my smartphone (ANdroid).
The smartphone shows the player, but no play button. if I click on the player, the soundcloud website opens (as external page), but even there I cannot play the track.

2. player version:
The code that I got from the soundcloud site (where I go to share, and then embed, chose the style) shows only the first three tracks in the window. At least the first style with the option to have a picture in the background, that is. For the other tracks you need to scroll. This is the code I received:

<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/58029261&amp;auto_pl...;

It looks pretty much like the code I received from you. However, when I enter your code, and then reopen the html window it shows these additions: %20%3C/body%3E%20%3C/html%3E">
Maybe that's why your code works at least on the IPad, while the code I received from the souncloud site didn't work neither on IPad nor Smartphone.

So in essence: When I use your code it works on IPad, but still not on smartphone and has the wrong design. When I use the code from Soundcloud (after chosing the right design) it doesn't work on IPad nor smartphone.

3. Style
Is it possible to not show the UserID on the player, I mean that long number? I tried to change the Username in my settings on soundcloud but I didn't succed. When I change the name it asks me for a new URL.

Thanks again.

Karla
Userlevel 7
Badge +3
Hey Mathis,

thanks for the code, but unfortunately it still doesn't work on the mobile.

How come, that the code you gave me is so different from the code I got from the soundcloud page?

The good thing about your version is, that it shows all 6 titles, not just the first three.

Is it possible to get the player version, where I can have a pic in the backgound instead at the side, like in your version?

And can I make adjustments in the code, so that the user number is invisible, as well as the number of clicks and the link to soundcloud. Would be great if it could be as 'pure' as possible.

Wow, lots of questions for you. Sorry for that!

Thanks a lot for your help.
Karla

Hi Karla,

Ah, ok, thank you for clarifying this. Let me run a few tests here and I'll get back to you in a few minutes.

As far as your username / UserID is concerned, you should definitely be able to change that. Actually, on the embedded player, you shouldn't see the URL code in the first place.
Either way, I would actually recommend to change your URL anyways, so that when you share the link to your public SoundCloud profile, it will already contain your name.

For instance, it seems no one has so far used the URL "https://soundcloud.com/songs-and-moments". Hence, you could go ahead and grab it and make your account a bit more personal.
You can change your Profile URL by going to this page: http://soundcloud.com/settings. To change your URL, click the little pen icon that appears beside your URL, like in this image: http://cl.ly/image/0D3b1l2G0L3V

You will need to update your embeds, so I'd suggest to do so now, when the number of embedded players is still relatively low, and have it all set for all future embeds.

Alright, I will now look into the embeds you have running already and get back to your about that then.

Cheers,
Mathis

Edit: I've tested this on my LG Optimus G Android device and it is working just fine. I'm using Android 4.4.2 and have Google's Chrome browser installed on the mobile device. Thus, this issue might be specific to your device. What are you using?
Hey Mathis,

thanks for the code, but unfortunately it still doesn't work on the mobile.

How come, that the code you gave me is so different from the code I got from the soundcloud page?

The good thing about your version is, that it shows all 6 titles, not just the first three.

Is it possible to get the player version, where I can have a pic in the backgound instead at the side, like in your version?

And can I make adjustments in the code, so that the user number is invisible, as well as the number of clicks and the link to soundcloud. Would be great if it could be as 'pure' as possible.

Wow, lots of questions for you. Sorry for that!

Thanks a lot for your help.
Karla

I am using am Samsung (Android with Firefox).

I managed to change the URL and the displayed User name. Thanks for that, too.

I just received a message from my friends that it now works on their smartphone (Android) and IPhone. So that's really good news. THANKS! So the problems regarding the player not playing might indeed relate to my device.

As I need the other player style, I've added a test page 'Neue Seite', where I installed another player in the style and size I want it. Could you have a look at that, too? On my friend's Samsung (Android) this player is only displayed very narrow so that the backgound picture is cut off, leaving only a narrow middle stripe, and the longer titles are cut off, too. There's enough space to show the whole player, and yet it doesn't.

And this player only displays the first three tracks and for the rest you have to scroll.

If you would find a solution for that, too, that would be fantastic.
Thanks so much for helping me.

Warm regards, Karla
Userlevel 7
Badge +3
Hey Mathis,

thanks for the code, but unfortunately it still doesn't work on the mobile.

How come, that the code you gave me is so different from the code I got from the soundcloud page?

The good thing about your version is, that it shows all 6 titles, not just the first three.

Is it possible to get the player version, where I can have a pic in the backgound instead at the side, like in your version?

And can I make adjustments in the code, so that the user number is invisible, as well as the number of clicks and the link to soundcloud. Would be great if it could be as 'pure' as possible.

Wow, lots of questions for you. Sorry for that!

Thanks a lot for your help.
Karla

Hi Karla,

I took a look at this, and it seems you've set the "width" parameter to be 60%, whereas on your other page, "Für die Ohren", it is set to 100%

This could be the reason your friend is seeing this embed differently on the mobile device as well.



P.S.: in case you cannot see this image properly, here it is again, in a higher resolution.

Cheers,
Mathis
Hey Mathis,

thanks for the code, but unfortunately it still doesn't work on the mobile.

How come, that the code you gave me is so different from the code I got from the soundcloud page?

The good thing about your version is, that it shows all 6 titles, not just the first three.

Is it possible to get the player version, where I can have a pic in the backgound instead at the side, like in your version?

And can I make adjustments in the code, so that the user number is invisible, as well as the number of clicks and the link to soundcloud. Would be great if it could be as 'pure' as possible.

Wow, lots of questions for you. Sorry for that!

Thanks a lot for your help.
Karla

Hi Mathis,
yes, I've set the width to 60% because I don't want the player that big. On my computer it is still showing the whole picture and the full length of the titles. It is not cut off, just reduzed in overall size.
Whereas on the Smartphone the whole player is cut off at the sides, although there is enough space on the page.

Best, Karla
Userlevel 7
Badge +3
Hey Mathis,

thanks for the code, but unfortunately it still doesn't work on the mobile.

How come, that the code you gave me is so different from the code I got from the soundcloud page?

The good thing about your version is, that it shows all 6 titles, not just the first three.

Is it possible to get the player version, where I can have a pic in the backgound instead at the side, like in your version?

And can I make adjustments in the code, so that the user number is invisible, as well as the number of clicks and the link to soundcloud. Would be great if it could be as 'pure' as possible.

Wow, lots of questions for you. Sorry for that!

Thanks a lot for your help.
Karla

Hi Karla,

Thanks for the info. Hmm, ok I see. I'll have to reach out to our developers as to why this is happening on a mobile device. We'll get back to you once we have new info.

Cheers,
Mathis
Userlevel 7
Badge +3
Hey Mathis,

thanks for the code, but unfortunately it still doesn't work on the mobile.

How come, that the code you gave me is so different from the code I got from the soundcloud page?

The good thing about your version is, that it shows all 6 titles, not just the first three.

Is it possible to get the player version, where I can have a pic in the backgound instead at the side, like in your version?

And can I make adjustments in the code, so that the user number is invisible, as well as the number of clicks and the link to soundcloud. Would be great if it could be as 'pure' as possible.

Wow, lots of questions for you. Sorry for that!

Thanks a lot for your help.
Karla

Hi Karla,

Alright, so I've received a response from our devs. The problem seems to be a bit more complicated here. I'll try to explain.

In css, there is a rule:
@media only screen and (max-width: 1023px) {
.diyw .diywebLiveArea,
.diyw .diyweb:before {
width: 720px;
}

Your player's iframe currently has the width set to "60%", so when you squeeze the window by
viewing the site on mobile, it sets the general div width to 720, and the player
resizes to (720-paddings,margins)*0.6=230 pixels. Hence, the behaviour is
expected.

Phew, sorta highly technical stuff, but essentially, this means the look of your website and of the embedded player is resized on mobile devices in a way that it automatically cuts the image.

Now, to the most important part, as a quick fix, we would suggest to hardcode the width and instead of working with % work with px: <iframe width="375px" height="450px"...>

Hope that makes sense!

Cheers,
Mathis
Hey Mathis,

thanks for the code, but unfortunately it still doesn't work on the mobile.

How come, that the code you gave me is so different from the code I got from the soundcloud page?

The good thing about your version is, that it shows all 6 titles, not just the first three.

Is it possible to get the player version, where I can have a pic in the backgound instead at the side, like in your version?

And can I make adjustments in the code, so that the user number is invisible, as well as the number of clicks and the link to soundcloud. Would be great if it could be as 'pure' as possible.

Wow, lots of questions for you. Sorry for that!

Thanks a lot for your help.
Karla

Thanks Mathis, I've changed it now and will contact my friend at the weekend to see whether it is solved now.
Any idea on how I can make all six tracks to be seen, instead of just the first three?
Thanks again and have a nice weekend. Karla
Userlevel 7
Badge +3
Hey Mathis,

thanks for the code, but unfortunately it still doesn't work on the mobile.

How come, that the code you gave me is so different from the code I got from the soundcloud page?

The good thing about your version is, that it shows all 6 titles, not just the first three.

Is it possible to get the player version, where I can have a pic in the backgound instead at the side, like in your version?

And can I make adjustments in the code, so that the user number is invisible, as well as the number of clicks and the link to soundcloud. Would be great if it could be as 'pure' as possible.

Wow, lots of questions for you. Sorry for that!

Thanks a lot for your help.
Karla

Hi Karla,

Looks good on my Android device 🙂 Showing all six tracks upfront is currently not an option in the visual embedded player. At the moment, people will have to scroll further down on the tracklist in order to see the other tracks.

Cheers,
Mathis
Hey Mathis,

thanks for the code, but unfortunately it still doesn't work on the mobile.

How come, that the code you gave me is so different from the code I got from the soundcloud page?

The good thing about your version is, that it shows all 6 titles, not just the first three.

Is it possible to get the player version, where I can have a pic in the backgound instead at the side, like in your version?

And can I make adjustments in the code, so that the user number is invisible, as well as the number of clicks and the link to soundcloud. Would be great if it could be as 'pure' as possible.

Wow, lots of questions for you. Sorry for that!

Thanks a lot for your help.
Karla

Hi Mathis,

just got the message, that it looks good on my friend's device, too.
Thanks so much for all the time you spent on solving this! You were truely helpful.
Best regards, Karla
Hi Mathis,

I have one more question. Maybe you could help again:

You might remember that I have that invisible autostart-player on my first page on songsandmoments.de. Right now it stops playing when I leave the page and open another page.
Is there a chance to change the code, so that it keeps on playing even if I change to another page?

I would like the music to keep on playing until someone clicks on the audio samples on 'Für die Ohren'. is that possible?

That is the code of the player on the start-page:

<iframe width="0%" height="450" scrolling="no" frameborder="no" src=
"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/175450368&amp;auto_play...;
</iframe>

Best regards, Karla
Hi Mathis,

I have one more question. Maybe you could help again:

You might remember that I have that invisible autostart-player on my first page on songsandmoments.de. Right now it stops playing when I leave the page and open another page.
Is there a chance to change the code, so that it keeps on playing even if I change to another page?

I would like the music to keep on playing until someone clicks on the audio samples on 'Für die Ohren'. is that possible?

That is the code of the player on the start-page:

<iframe width="0%" height="450" scrolling="no" frameborder="no" src=
"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/175450368&amp;auto_play...;
</iframe>

Best regards, Karla

Ops, something went wrong with the old player. I embedded a new one:
Here's the code:

<iframe width="0%" height="166" scrolling="no" frameborder="no" src=
"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/175466622&amp;color=ff5...;
</iframe>

For some reason I cannot copy/past the complete code here. It's always cut off.
Hi sorry for Jumping in.
I too are having the same problem on a galaxy s3(stock browser) http://fotojig.com/soundcloud/ in not showing the track just the grey back ground and soundcloud logo
regards mick
Userlevel 7
Badge +3
Hi sorry for Jumping in.
I too are having the same problem on a galaxy s3(stock browser) http://fotojig.com/soundcloud/ in not showing the track just the grey back ground and soundcloud logo
regards mick

Hi Mico,

Hmm, ok, let's see. I just went to your homepage and tested this both on a web browser and on a mobile browser - the embedded tracks were showing properly on both devices.

Is this still a persistent issue? We've had some minor issues with embeds last week where the overlay couldn't be "x'ed" out properly, however this has now been sorted. Maybe this was affecting your page as well?

Cheers,
Mathis
Hi sorry for Jumping in.
I too are having the same problem on a galaxy s3(stock browser) http://fotojig.com/soundcloud/ in not showing the track just the grey back ground and soundcloud logo
regards mick

Hi Mathis, i _ve embedded a profile user in my own app by iframe but the scroll dosn _t work in android... For ios works... how can i fix it?

Thanks!
Userlevel 7
Badge +3
Hi sorry for Jumping in.
I too are having the same problem on a galaxy s3(stock browser) http://fotojig.com/soundcloud/ in not showing the track just the grey back ground and soundcloud logo
regards mick

Hi Antonio,

Any chance you can send over the URL where the embed lives? I'd like to take a look at this myself. Maybe you can also send over a screenshot to make sure we're on the same page?

Cheers.
Mathis
Hi sorry for Jumping in.
I too are having the same problem on a galaxy s3(stock browser) http://fotojig.com/soundcloud/ in not showing the track just the grey back ground and soundcloud logo
regards mick

Hi Mathis, I'm having a similar issue where my player will not show up on Mobile. I am using a Wordpress theme.

Can you help me out?

http://chicagocreativespace.com/themetaphorcast/the-future-of-workplace-design/

Reply