After months of carefree use, now mixcloud have updated their ‘player widget’ and causing me all sorts of problems. Seems to play all right on mobiles but not on my desktop. ‘3 Oct’ works ok on desktop because that is flash based - but won’t on iPhone. So trying to sort out ‘26 Sept’ player.
Their reply was:
We recommend everybody to use the iframe embed code because it will seamlessly work between desktop and mobile devices. The embed code you generated from our website is valid and works. You can check this by being on our site and playing the audio within the widget. The reason why it is not working on your website is because the embed code has been modified. The content with the iframe tag in the ‘src’ attribute needs to match what you have posted above. Your player code does not match this, so when the iframe loads that specific Mixcloud widget page it is setting incorrect information which is disallowing playback.
What is the ‘src’ attribute and how do I match it to the code?
copy of code after it has been pasted into iframe page:
but the original copied code is
Code seems to have expanded once put into the iframe page. where did all the %22 and similar come from?? - I sense this my problem, amongt others!
The % escape codes are used to turn characters that mean something specific in a URL into a replacement that can pass within a URL without being interpreted as a slash, for example, and making the URL mean something besides what you want it to. Can you explain how you pasted this code? Was it in a Markup Item?
Walter
PS: I converted your massive blobs of HTML into Gists, which will hopefully render a little better in FreewayTalk’s Web view, for those who use it. When I did, I saw some line-breaks in the middle of the code that might make it behave ambiguously, but since they came out of Mail, I really don’t know where they came from, so I can’t point any fingers here.
Go to https://gist.github.com and you will see a large textarea. Paste your code into that textarea (it has a neat code editor effect that will color code the text based on the language you tell it it is) and the press the Make Public Gist button. Copy the URL from the page you are redirected to, and paste it all by itself on a single line in your mail message. FreewayTalk looks for these URLs and converts them into a line of JavaScript that will embed the color-coded and nicely formatted code in an iframe.
Walter
On Oct 8, 2013, at 10:25 AM, Noel Sergeant wrote:
Code was copied from mixcloud site and pasted into iFrame action > URL > External > Protocol: http
Also - In future how do I place large blobs of html into gist?
For our service to work as expected we require you to use our generated embed code. We have recently updated our widget to use a html-based widget as default in replacement of the old flash-based. The reason why it might have worked for you in the past is because the flash is a standalone technology which can run regardless of html errors in the code. You will need to fix all of your invalid player embeds before the player will begin playing for you.
This is because it did work perfectly, even with all the %22 additions to the code, until very recently.
See if Mixcloud offer a blob of code that includes the outer iframe code – something that is a complete iframe, meant to be pasted into Dreamweaver or a text editor. Then draw or insert a Markup Item in your page, and paste the code there. See how that works, versus using the iframe Action to draw it.
Walter
On Oct 8, 2013, at 10:38 AM, Noel Sergeant wrote:
forgot to say that mixcloud also said this
For our service to work as expected we require you to use our generated embed code. We have recently updated our widget to use a html-based widget as default in replacement of the old flash-based. The reason why it might have worked for you in the past is because the flash is a standalone technology which can run regardless of html errors in the code. You will need to fix all of your invalid player embeds before the player will begin playing for you.
This is because it did work perfectly, even with all the %22 additions to the code, until very recently.
Sadly not. They only offer iframe embed code (as above) and non-frame html code which is ok for anything but iPads and iPhones as it uses a flash based player - so no other options.
But why does my code expand hugely once placed into the iframe action?
I just went there and looked at a feed, and clicked on the little <> embed icon. They do offer the entire iframe code blob there by default.
Here’s one for a public playlist:
Note how it begins with the <iframe …> code, and ends with . Now if you were to paste that entire thing into the iframe Action, you would end up with <iframe … src=“<iframe …>”> which is completely broken. I don’t imagine you would do that. If you are pasting the entire content of the src attribute (including the % escapes) into the iframe Action, then it should write the same code as the Gist above. But that would be your goal – to make the output from the Action identical to the entire iframe embed code, not a combination of that code and another iframe wrapped around that.
Walter
On Oct 8, 2013, at 10:51 AM, Noel Sergeant wrote:
Sadly not. They only offer iframe embed code (as above) and non-frame html code which is ok for anything but iPads and iPhones as it uses a flash based player - so no other options.
But why does my code expand hugely once placed into the iframe action?
Note how it begins with the <iframe …> code, and ends with . Now if you were to paste that entire thing into the iframe Action, you would end up with <iframe … src=“<iframe …>”> which is completely broken. I don’t imagine you would do that. If you are pasting the entire content of the src attribute (including the % escapes) into the iframe Action, then it should write the same code as the Gist above. But that would be your goal – to make the output from the Action identical to the entire iframe embed code, not a combination of that code and another iframe wrapped around that.
Walter
On Oct 8, 2013, at 10:51 AM, Noel Sergeant wrote:
Sadly not. They only offer iframe embed code (as above) and non-frame html code which is ok for anything but iPads and iPhones as it uses a flash based player - so no other options.
But why does my code expand hugely once placed into the iframe action?
many, many thanks for that Walt, now works a treat.
how come I don’t need all the code that is presented!
Because the iframe Action writes everything about the iframe tag except for the content of the src attribute. If you paste another entire iframe inside the src attribute field, you get broken code.
and my previous problem - how come all the %22s appear in the code?
I see %2F everywhere in the widget code they gave you – that’s a forward slash. I forget what %22 means. These escape codes are needed because you can’t pass an entire URL as an argument in another URL. For example:
will never work properly, because everything after the ? is an argument, and it cannot include slashes or question marks or hash marks without confusing the browser. That same URL could be rewritten as: