Spotify Embed no longer has play button

[roul123]

Hey there,

I wanted to give you a heads up about a potential bug with the Spotify embedded podcasts. Recently, the play button has gone missing from the embedded iframes on my website, and I've seen others reporting the same issue.

Here's a quick rundown:

1. Play button not showing on embedded iframes.
2. Issue started in the last few days
3. There are no play buttons even when copying the embeding structure directly from where you can share  a podcast from the the Spotify platform, hit embed, then hit show code
4. Other people are also reporting this (https://www.reddit.com/r/truespotify/comments/12u7qim/spotify_embed_does_not_show_the_play_button/)

Could you guys look into this and see if there's a bug on your end? The embedded podcasts are pretty important for user engagement on our sites.

Plan

Premium

Country

USA

Device

Web app

Operating System

Web app

[roul123]

Also this is not a width or sizing of the embeding I have tried many sizes

[fzhan]

Me either.

I found that this bug occur on old version of MacOS,

and Cookie Policy causes this issue.

There's an error message on developer console: "caught DOMException: Failed to read the 'l ocalStorage' property from 'Windo w': Access is denied for this document."

Then I tried to turn off Cookie Block config, this issue is gone.

Hope some guy fix it up!

[roul123]

ah I am seeing that now as well:
ndor~embed.c21c263a.js:1 Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
at 1109 (https://open.spotifycdn.com/cdn/build/embed/vendor~embed.c21c263a.js:1:366178)
at s (https://open.spotifycdn.com/cdn/build/embed/embed.445ab8c1.js:1:202406)
at 39073 (https://open.spotifycdn.com/cdn/build/embed/vendor~embed.c21c263a.js:1:448705)
at s (https://open.spotifycdn.com/cdn/build/embed/embed.445ab8c1.js:1:202406)
at 6948 (https://open.spotifycdn.com/cdn/build/embed/vendor~embed.c21c263a.js:1:398916)
at s (https://open.spotifycdn.com/cdn/build/embed/embed.445ab8c1.js:1:202406)
at 86715 (https://open.spotifycdn.com/cdn/build/embed/embed.445ab8c1.js:1:95287)
at s (https://open.spotifycdn.com/cdn/build/embed/embed.445ab8c1.js:1:202406)
at https://open.spotifycdn.com/cdn/build/embed/embed.445ab8c1.js:1:205988
at s.O (https://open.spotifycdn.com/cdn/build/embed/embed.445ab8c1.js:1:202688)
1

[roul123]

This doesn't just happen in my local development space either, it happens when I deploy to vercel as well

[db1995]

Same problem

[jasperwiet]

Same problem on my Mac in Chrome. In Safari the play button shows. 

On the pc of a colleague the play button shows in Chrome and in Edge. 

It's indeed a problem related to the cookie settings. 

When I change the setting in Chrome from "block third party cookies" to "allow all cookies", the issue is resolved.  

That doesn't explain of course why it used to work in the past with the "block third party cookies" setting on. 

[Yordan]

Hi everyone,

This behavior seems indeed related to the way third-party cookies are blocked in Chrome. Rest assured our tech folks are aware of this and are working on a fix that should be released in the upcoming weeks, so stay tuned!

The Community is always here if something else comes up in the meantime.

Cheers!

[RavanH]

Most browsers I tested do not show the play button, except Firefox. Funny though, that when I embed a podcast on this forum, it will play in all browsers. See the embedded player in this post here https://community.spotify.com/t5/Spotify-for-Developers/Embedded-player-with-podcasts-working-on-Chr...

But when embedding that exact same player on another website, it will fail (except Firefox). But on the other hand, it does work inside the WordPress admin back-end of that same web site. Very puzzling...

[RST_11]

Joining this conversation to say that I am experiencing this issue as well. The embedded player will not play in Chrome. You can click over from our website to Spotify and listen to the podcast there, but you cannot listen to the podcast via the embedded player while on our website. We've tested this issue with multiple people in multiple states, and everyone is experiencing this issue. A development, perhaps, is that you can see the play button. However, nothing happens when you click on it. 

You can listen to the podcast via the embedded player on our website in Safari. 

Screenshot is what I see in Chrome, desktop.

[RavanH]

Hi @RST_11 do you embed on a WordPress site? If so, could you check on the admin side of the page (where the podcast is embedded) if the player works there? In my case it does, while not working on the public side which is strange to me and seems inconsistent with the conclusion that it is related to third party cookies... Anyway, you might consider using the embed code from podcasters.spotify.com instead, as that appears to work just fine. Only downside: it only plays one podcast, not a playlist.

[RavanH]

For the developers: Please compare the following two player embeds, using the exact same embed code and explain why one works but the other one does not.

https://codepen.io/RavanH/pen/OJaLoWd

https://maxwellconroe.com/test/

Note: the second one, which does not work, shows the text "VOORBEELD" (my browser is Dutch) meaning "PREVIEW"... Is there no preview available for podcasts? And why does the player on Codepen.com not show this but allows the full podcast to be played?

[OChatzid]

Hi there Yordan, any news on this? I am just trying the embedded song and still no play button from what I can see. Any advice? I am making a mag for the Liverpool University Students and most of them are opening from chrome as well. 

[sushants]

Hello folks,

I am an engineer working on the Spotify embed player. As already pointed out in the thread this issue started happening when Chrome made changes that disallowed accessing storage APIs like "localStorage" that we depend on. We have now put in a fix for this that should solve this issue. Thank you for your patience and support. 

Regards,

Sushant

[RavanH]

Excellent stuf! The player seems to be working on our site https://maxwellconroe.com/the-meaning-of-being/ 🙂

Only still missing the playback position bar and still showing the text "Preview" which does not happen on https://codepen.io/RavanH/pen/OJaLoWd for example.

Same browser, same podcast, different result... Is that also related to the localStorage API?

[sushants]

This is because the "Permission-Policy" response header when the main HTML document is fetched has "encrypted-media" set to "self". This prevents the encrypted-media policy from taking affect on any other origin like open.spotify.com. You should either set it to "*" or set it explicitly to "open.spotify.com".

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy

Hope this helps.

Regards,

Sushant

[RavanH]

Thanks a million @sushant that fixed it 🙂

[angelos23]

I'm encountering a similar issue on my app deployed on Vercel. The embeds of playlists that I create through my app don't show any songs or a preview image. This issue isn't occurring for playlists that I create through the Spotify app or playlists that already exist. It's also not occurring when my app runs on localhost. This screenshot shows how to playlist embed shows up on my app: 

I've tested in both Safari and Chrome. The issue persists on both.