まず埋め込みコードの形式を確認する
YouTubeの埋め込みは、動画ページの共有メニューから取得するiframeコードを使うのが基本です。通常の視聴URL(youtube.com/watch?v=...)をそのままiframeのsrcに入れても再生できません。src属性には youtube.com/embed/動画ID という埋め込み専用の形式を指定する必要があります。
AI生成のHTMLでは、watch形式のURLをそのままiframeに入れてしまうケースがよくあります。動画IDだけを取り出し、embed形式に組み立て直すと表示されることが多いです。IDは watch?v= の後ろや、共有用の短縮URL youtu.be/ の後ろに付いている文字列です。
また、URLの先頭が http のままだとブロックされることがあります。https から始まる形に揃えておくと安全です。
iframeの許可属性が足りていないか
枠は出るのに再生ボタンが効かない、全画面にできないといった場合は、iframeのallow属性やallowfullscreen属性が抜けていることがあります。YouTube公式が配布するコードには、自動再生やピクチャインピクチャなどを許可する属性が含まれています。
公式の共有メニューからコピーした最新のコードを丸ごと貼り直すと、必要な属性がまとめて揃います。自分で属性を削ってしまった場合は、削った部分が原因になっていないか見直してください。
- src が youtube.com/embed/ 形式になっているか
- allowfullscreen が付いているか
- allow 属性に autoplay や encrypted-media などが含まれているか
- width と height、または CSS で表示サイズが確保されているか
症状別チェック表
YouTube埋め込みが表示されないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
動画側の公開設定と埋め込み許可
コードが正しくても、動画自体が「限定公開」や「非公開」だったり、投稿者が埋め込みを許可していない設定だと、外部ページでは再生できません。別の公開済み動画に差し替えてテストすると、ページ側の問題か動画側の問題かを切り分けられます。
年齢制限のある動画や、地域によって視聴できない動画も、埋め込み先で再生できないことがあります。テスト用には制限のない一般公開動画を使うのが確実です。
表示されないときの切り分け手順
原因が複数あり得るときは、上から順に1つずつ確認すると無駄がありません。次の手順で進めてください。
- ブラウザの開発者ツールでコンソールにエラーが出ていないか見る
- iframeのsrcをコピーし、ブラウザのアドレスバーに直接貼って単体で開けるか試す
- src を youtube.com/embed/動画ID の形に書き換える
- 公式の共有メニューから取得したコードに丸ごと差し替える
- 制限のない別の一般公開動画で表示されるか確認する
確認用に共有するときの注意
ローカルのファイルをダブルクリックして開くと、ファイルがhttpsで配信されないため、埋め込みがうまく動かないことがあります。実際の見え方を確かめるには、httpsで配信される環境にアップして開くのが確実です。
ギガサイト便にHTMLをドロップすると、その場で 〇〇.giga-site.com のhttpsの共有URLが発行され、CDNのエッジ配信で素早く表示されます。埋め込みが本番に近い条件で動くか確認しやすく、関係者にレビューしてもらうのに向いています。コードを直したら同じURLのままファイルを差し替えられるので、リンクを送り直さずに再確認を依頼できます。
よくある質問
視聴用URLをそのままiframeに入れたら表示されません。
youtube.com/watch?v= の視聴用URLは埋め込みでは使えません。動画IDを取り出し、src を youtube.com/embed/動画ID の埋め込み専用形式に書き換えてください。公式の共有メニューからコピーするのが確実です。
枠は出るのに全画面ボタンが効きません。
iframeに allowfullscreen 属性が付いていない可能性があります。公式が配布するコードには必要な許可属性がまとまって含まれるので、丸ごと貼り直すのがおすすめです。
特定の動画だけ埋め込めません。
その動画が限定公開・非公開だったり、投稿者が埋め込みを許可していない場合があります。制限のない一般公開動画で表示できるか試し、動画側の設定が原因かを切り分けてください。
ローカルで開くと動かないのですが配信すれば直りますか。
ローカルファイルのままだとhttpsで配信されず動作が不安定になることがあります。ギガサイト便などでhttpsの共有URLとして配信すると、本番に近い条件で表示を確認できます。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。