Iframe API player background color

[veronicabend]

Is there a way to set the player color to black with iFrame API? If we embed manually, there is the option to use the black background color when creating the embed code. It adds &theme=0 to the podcast URL. 

I am not finding a way to achieve the same using the Iframe API.

Thanks! 

[Ximzend]

I think you can find the answer on this page:

https://developer.spotify.com/documentation/embeds/tutorials/using-the-iframe-api

[veronicabend]

Thank you, I have already looked in that page, but there is no explanation there on how to change the player background color. It only mentions changing the width and height. 

[Prague]

A howlin' hello to you veronicabend!
Yes, you can set the player color to black using the Spotify Player SDK and the iFrame API. To achieve this, you can pass the theme parameter in the Spotify Player SDK initialization code. Here's an example of how you can do it:

// Initialize the Spotify Player SDK
const player = new Spotify.Player({
  name: 'Your Player Name',
  getOAuthToken: callback => {
    // Implement your logic to retrieve the user's access token here
    // Call the callback function with the access token
    callback('YOUR_ACCESS_TOKEN');
  },
  theme: 'black' // Set the player theme to black
});

// Connect to the player
player.connect().then(success => {
  if (success) {
    console.log('The player is connected!');
  }
}).catch(error => {
  console.error('Error connecting to the player:', error);
});

By setting the theme parameter to 'black', you can achieve a black player background color using the Spotify Player SDK and the iFrame API. 
Sending 'fur-bulous' vibes and I hope that I've been helpful,

-Prague the Dog

[Ximzend]

In the code at the bottom of the page, you can see two times "background:".

[veronicabend]

Yes I see background two times, but that is CSS to set background of the "Episode" buttons that the example adds on the left. I need to change the background of the player itself. 

[veronicabend]

Hi Prague, thank you, but I am not using that SDK, I am using the Iframe API. There is no Oauth token there, the code is different:

window.onSpotifyIframeApiReady = (IFrameAPI) => {
  const element = document.getElementById('embed-iframe');
  const options = {
      uri: 'spotify:episode:7makk4oTQel546B0PZlDM5'
    };
  const callback = (EmbedController) => {};
  IFrameAPI.createController(element, options, callback);
};

I think the Options parameter would need to allow for setting "theme=0" as when you embed manually, but I have not seen that in documentation. I saw that the possible options are the uri, the width and height of the player.

Thanks.

[sushants · Accepted solution]

Hi veronicabend, 

I'm an engineer working in the team that owns the Iframe API. We have added the option `theme` that can be set to `dark` in order to load the dark variant of the embed player using the Iframe API. 

window.onSpotifyIframeApiReady = (IFrameAPI) => {
  let element = document.getElementById('embed-iframe');
  let options = {
      uri: 'spotify:episode:7makk4oTQel546B0PZlDM5',
      theme: 'dark'
    };
  let callback = (EmbedController) => {};
  IFrameAPI.createController(element, options, callback);
};

Thank you for reaching out to us. Hope this helps 🙂 

[veronicabend]

Thank you! It worked perfectly.