Effective Ways to Fix White Background Error in Spotify Embed Code

Question

<iframe src="https://open.spotify.com/embed/track/6wsqVwoiVH2kde4k4KKAFU?utm_source=generator" width="500" height= "100" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

I'm using NextJS 13.4. No problem in light mode. But when I switch to dark mode, there is a white background behind the song, like this:

Background error in Spotify embed code

I can't resolve this error via CSS. Thank you in advance.

I want the song container to be transparent.

Answer 1

You should not style the background, but should use one of the supported heights, and then the player will have its own color to embed.

In your case, do the following:

1. Change the height to 80 (152 and 352 are larger options).
2. Add frameBorder="0" to remove the surrounding white lines.
3. Add style="border-radius:12px" to remove the white corners.