I have a Spotify Oembed on my website but even after I'm logged in, the oembed is still in preview mode, not able to play full tracks. It works on Codepen and on my localhost via Flask.
This is my code:
<section id="spotify-player">
<!-- spotify playlist player -->
<div id="music"></div>
<script>
const music = document.getElementById("music");
// tells you what today's date is
const d = new Date();
// gives the day of the week as a number (0-6) i.e. sunday = 0
let day = d.getDay();
function changeSong(url) {
fetch(`https://open.spotify.com/oembed?url=${url}`)
.then((response) => response.json())
.then((data) => {
music.innerHTML = data.html;
});
};
if (day == 0 || day == 2) {
changeSong('https://open.spotify.com/playlist/37i9dQZF1DX9uKNf5jGX6m');
} else if (day == 1 || day == 3 || day == 5) {
changeSong('https://open.spotify.com/playlist/37i9dQZF1DWURfu7Lk3xJ1');
} else {
changeSong('https://open.spotify.com/playlist/37i9dQZF1DWTiAxGU5Bgem');
};
</script>
</section>
Here is the Codepen. My website was deployed via Lightsail. Any reason why the oembed is stuck in preview mode on my website but works perfectly fine on Codepen and localhost?
Here are two similar posts to provide context if helpful:
- Issue with Spotify Iframes in client vs server side instances
- Spotify Embed iFrame only plays previews of songs
Any help is much appreciated, thank you!