Spotify 埋め込みコードの白い背景エラーを修正する効果的な方法

Question

<iframe src="https://open.spotify.com/embed/track/6wsqVwoiVH2kde4k4KKAFU?utm_source=generator" width="500" height= "100" allowed="autoplay; クリップボード書き込み; 暗号化メディア; フルスクリーン; ピクチャーインピクチャー"loading="lazy"></iframe>

NextJS 13.4 を使用しています。ライトモードでも問題ありません。しかし、ダーク モードに切り替えると、次のように曲の後ろに白い背景が表示されます:

Spotify 埋め込みコードのバックグラウンド エラー

CSS ではこのエラーを解決できません。よろしくお願いします。

ソングコンテナを透明にしたいです。

Answer 1

背景のスタイルを設定する必要はありませんが、サポートされている高さの 1 つを使用する必要があります。そうすれば、プレーヤーに埋め込む独自の色が与えられます。

あなたの場合、次のことを実行してください:

1. 高さを 80 に変更します (152 と 352 はより大きなオプションです)。
2. frameBorder="0"を追加して周囲の白線を削除します。
3. style="border-radius:12px" を追加して白い角を削除します。