解决Spotify嵌入代码中的白色背景错误的有效方法

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>

我正在使用NextJS 13.4。在浅色模式下没有问题。但是当我切换到暗色模式时，歌曲后面会有白色背景，就像这样：

Spotify嵌入代码的背景错误

我无法通过CSS解决这个错误。提前谢谢。

我希望歌曲容器是透明的。

Answer 1

你不应该为背景样式，而是应该使用其中一个支持的高度，然后播放器会有自己的颜色来嵌入。

在你的情况下，执行以下操作：

1. 将高度更改为80（152和352是更大的选项）。
2. 添加frameBorder="0"以去除周围的白线。
3. 添加style="border-radius:12px"以去除白色角落。