Spotify Play Button is not working - playing only previews in recent Chrome

Question

I was going back and forth with Spotify Cares Twitter for over four days. Finally they directed me here, so I hope one of the devs from Spotify will answer.

I am trying to put Spotify Play Button on the website. I was following the instructions from the documentation. Then I also found on the Spotify blog, that some details had changed in July 2018. So I have tried this code as well.

Whatever I did, the Play Button embed player plays only preview (30 seconds) when accessing website in the Chrome (version 68 and 69).

The code is simple and straight taken from the documentation/blog:

<iframe src="https://open.spotify.com/embed?uri=spotify:album:1DFixLWuPkv3KT3TnV35m3" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

This code I have put into the empty HTML, so completely no other code interfering. You can check it in the example on Codepen.

I have tried to isolate the issue and here's what I have found:

• In Chrome it never works: neither when I am logged into Spotify nor when I am not and log in with the button that shows up in the player
• In Chrome with/without SSL - in both cases it didn't work
• In Firefox it works properly. When I log into Spotify on the browser, go to the page, it plays full tracks
• Also asked my friends to go to the page with this code and - being logged into Spotify - it didn't work for them as well
• The play button works properly in the examples on blog and documentation of Spotify - which is in their domain, so it is the same domain as the iframe content - this is a hint I think.
• I have checked also recent changes in Chrome, but only one concerning iframe was adding allow on microphone and camera. Even using this one didn't help (but this should not be related actually).
• I have also checked on recent Safari / MacOS - the issue is there as well (but not on Firefox/MacOS)

What can be the reason for the issue? How to solve this? Or maybe Spotify devs team need to fix it?

Answer 1

So the answer is quite obvious if you know where to look.

Under chrome://settings/content/cookies Google Chrome has this option Block third-party cookies. I had it enabled and that was the cause of the issue.

But why I didn't think of it before? It's because Google Chrome in such case adds to all non-white-listed (see below) sites a cookie icon with red X to the right side of the Address Bar. When one clicks it, it shows two options:

• Always allow [url of the site] site to save cookies
• Keep blocking the cookies

And since I had the first one selected it looked good to me back then.

But this option is not the same as "allow use of the third-party cookies", which is not available in the popup options window.

In fact to allow sites to use cookies from Spotify, you have to either:

1. Disable the option Block third-party cookies in the Chrome Settings in general
2. or add [*.]spotify.com to your white-list (I recommend this one)

And that way, any site can access spotify.com cookies to check if user is logged in to properly play music (full tracks or just previews).

And one final note: the site with the embed play button code must be accessed with SSL, so via https.

I didn't check how to change that for Safari on MacOS, but probably the solution is similar to this one.