Search code examples
cssnext.jsembedspotify

How can i solve the white background bug at spotify embed code?

<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 using NextJS 13.4. There is no problem in light mode. Whenever I switch to dark mode, there is white background behind the song like this:

Background bug at spotify embed code

I could not solve the error with CSS. Thank you in advance.

I expected the sing container to be transparent.

Solution

  • You're not supposed to style the background, you're supposed to use one of the supported heights and then the player has it's own colour for the embed.

    In your case, do all of these:

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