共有リンクではなく「埋め込みコード」を使っているか
よくある間違いが、Spotifyの通常の共有リンク(open.spotify.comのURL)をそのまま貼ってしまうことです。これは再生プレーヤーにはなりません。埋め込むには、Spotifyの共有メニューから「埋め込み(Embed)」を選び、生成されるiframeコードを使う必要があります。
埋め込みコードはiframeタグになっており、srcにopen.spotify.com/embed/から始まるURLが入っています。embedの語が含まれているかが、プレーヤーになるかどうかの分かれ目です。
プレーンテキストしか書けない場所(マークダウンの一部やコメント欄など)ではiframeが無効化されることがあるため、HTMLをそのまま記述できるページに貼ることが前提です。
iframeコードのコピー漏れ・改変を確認する
埋め込みコードをコピーする際に、末尾の閉じタグや属性が欠けると正しく描画されません。iframeの開始タグから閉じタグまでが丸ごと貼られているかを確認しましょう。
CMSのエディタによってはiframeのwidthやheight、srcの一部をサニタイズ(自動除去)してしまうことがあります。ビジュアルエディタではなくHTMLソースの編集モードで貼り直すと改変を防げます。
高さがゼロになって見えなくなっているだけのこともあるので、heightが適切な値になっているか、親要素のCSSでサイズが潰されていないかも確認してください。
症状別チェック表
Spotifyの埋め込みプレーヤーが表示されないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
表示されないときの切り分け手順
Spotifyの埋め込みが出ないときは、コードの問題かブロックの問題かを分けて考えると早く解決します。次の順番で確認してください。
- 貼ったコードがiframeで、srcにopen.spotify.com/embedが含まれているか確認する
- iframeの開始タグから閉じタグまで欠けなく貼られているか、HTMLソースで点検する
- 広告ブロッカーやトラッキング防止系の拡張を無効化し、別ブラウザでも表示を試す
- DevToolsのコンソールでCSP違反や読み込みブロックのエラーが出ていないか確認する
- 別の楽曲・プレイリストの埋め込みコードでも再現するか試し、コンテンツ固有の問題かを切り分ける
ブラウザ拡張・CSP・Cookieによるブロック
埋め込みコードが正しくても、広告ブロッカーやトラッキング防止系のブラウザ拡張が外部iframeの読み込みを止めることがあります。拡張を無効化したクリーンなブラウザで表示されるなら、これが原因です。
ページ側にコンテンツセキュリティポリシー(CSP)が設定されていると、Spotifyのドメインからのフレーム読み込みが拒否され、コンソールにframe-ancestorsやframe-src関連のエラーが出ます。許可ドメインの設定を見直す必要があります。
サードパーティCookieをブロックする設定でもプレーヤーの一部機能が制限されることがあります。検証はCookie制限のゆるい環境でも試すと切り分けやすくなります。
埋め込み入りページを関係者に確認してもらう
埋め込みの見え方は閲覧者のブラウザ設定や拡張に左右されるため、自分の環境だけでなく複数の環境で確認しておくと安心です。とくに公開前のページは、他の端末や別ブラウザでもプレーヤーが正しく出るかをチェックしましょう。
完成前のページを社外の関係者に見せて表示確認してもらいたいときは、認証付きの一時URLで共有できるギガサイト便のような仕組みが役立ちます。HTMLをそのままアップして共有URLを発行できるので、iframe入りのページを実際の表示のままレビューしてもらえます。修正後は同じURLのまま中身を差し替えられるため、再確認の手間も減らせます。
よくある質問
URLを貼ってもプレーヤーになりません。
通常の共有リンク(open.spotify.comのURL)はプレーヤーにはなりません。Spotifyの共有メニューから「埋め込み(Embed)」を選んで生成されるiframeコードを使ってください。srcにembedが含まれているのが目印です。
コードを貼ったのに高さが出ず見えません。
iframeのheightがゼロになっているか、親要素のCSSでサイズが潰されている可能性があります。HTMLソースでheight属性が適切な値になっているかを確認し、レイアウト側の高さ指定も見直してください。
自分の環境だけ表示されないのはなぜですか?
広告ブロッカーやトラッキング防止系のブラウザ拡張が外部iframeをブロックしている可能性が高いです。拡張を無効化したクリーンなブラウザやシークレットウィンドウ、別端末で表示されるか試してください。
コンソールにframe関連のエラーが出ます。
ページにCSP(コンテンツセキュリティポリシー)が設定され、Spotifyドメインからのフレーム読み込みが拒否されている可能性があります。frame-srcなどの許可設定を見直すか、CSPの制約がない環境で表示を確認してください。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。