よくある原因
原因の第1位はiframe srcのURLフォーマットミスです。YouTubeの動画URLは`youtube.com/watch?v=XXXX`ですが、埋め込みには`youtube.com/embed/XXXX`を使う必要があります。この2つを混同してwatch形式をそのまま貼ると、ブラウザはiframeを表示しようとしますが再生コントロールが出ず動画は見えません。
原因の第2位は動画の公開設定です。「非公開」動画を埋め込むとYouTubeのログインセッションがないブラウザでは完全にブロックされます。「限定公開」の場合もiframe経由では認証が通らないことがあります。共有用途には「公開」設定にした動画を使うのが最もトラブルが少ない方法です。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
チェック1：iframeのsrc URLを確認します。`https://www.youtube.com/embed/XXXXXXXXXX`（動画IDの部分が11文字）の形式になっているか確認します。タイプミスがないかはYouTubeで動画を直接開いて動画IDをコピペして上書きすると確実です。
チェック2：HTMLをHTTPS環境で公開しているか確認します。HTTPのページにhttps://youtube.comのiframeを埋め込むとMixed ContentではなくCSPの制約でブロックされることがあります。GitHubPagesやギガサイト便など自動でHTTPS対応する環境を使い、シークレットウィンドウで動画が再生できるか確認します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
チェック3：相手のブラウザで広告ブロッカーが有効かを確認してもらいます。uBlock OriginなどはYouTubeのiframeも広告の一部と判断してブロックすることがあります。拡張機能を無効にしてから再読み込みで表示されれば原因が特定できます。
チェック4：会社や学校のネットワークを使っていないか確認してもらいます。フィルタリングソフトによってはYouTubeを完全にブロックしているケースがあります。スマホのモバイルデータで開いてもらうことで30秒で切り分けが完了します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
HTMLを本番公開する前に「①embed形式のURL確認、②動画の公開設定確認、③シークレットウィンドウでの再生確認」の3ステップをルール化します。この3点を確認するだけでYouTube埋め込みトラブルの大半を防ぐことができます。
チェックリストをmarkdownやNotionのテンプレートとして保存しておき、HTML公開のたびにコピーして使うことで確認漏れをゼロにします。複数人でHTMLを作成・共有する体制があるなら、GitのPRテンプレートにこのチェックリストを組み込むのも効果的です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
チェックリストを全部確認しましたが、まだ動画が表示されません。ほかに確認すべきことはありますか？
サーバーのContent Security Policyヘッダーを確認してください。frame-srcにhttps://www.youtube.comが含まれていない場合、ブラウザがiframeをブロックします。開発者ツールのコンソールに「Refused to frame」というエラーがあれば確定です。
埋め込んだ動画がスマホでは見えますが、PCでは見えません。
PC側のブラウザ拡張（特に広告ブロッカーやプライバシー系）が原因の可能性が高いです。PCのChromeでシークレットウィンドウを開いて確認し、そこで見えれば拡張機能の無効化を試してください。
HTMLに複数のYouTube動画を埋め込むとき、すべて表示されないことがあります。
複数のiframeを同一ページに入れると読み込みが重くなり、後半のiframeがタイムアウトして表示されないことがあります。loading="lazy"属性を各iframeに追加して遅延読み込みにするか、最初は1本だけ表示してJavaScriptで順次読み込む実装を検討してください。