トラブルシュート

YouTube埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト

AIツールでYouTube埋め込みのHTMLを生成させると、動画IDの誤記・非対応URLフォーマット・autoplay設定ミスなど複数のパターンで動かないコードが出力されることがあります。どのようなプロンプトを渡せば最初から動くコードを得られるか、具体的な書き方を紹介します。

よくある原因

AIは「YouTubeの動画を埋め込んで」という指示に対し、`https://www.youtube.com/watch?v=XXXX`というwatch URLをそのままiframe srcに入れたコードを生成することがあります。このURLは埋め込み非対応のため、ブラウザがiframeを表示しても再生コントロールが正常に機能しません。プロンプトで「embed形式のURLを使うこと」と明示する必要があります。

AIが動画IDとして架空の文字列(例:`SAMPLE_VIDEO_ID`)をプレースホルダーに使ってコードを出力するケースもあります。ユーザーがそのまま使うと無効な動画を参照してエラーになります。プロンプトに実際の動画URLを貼り付け「このURLの動画を埋め込んでください」と渡す方法が最も確実です。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

自分側で確認すること

AIが出力したHTMLのiframe srcが`https://www.youtube.com/embed/XXXX`形式になっているか確認します。動画ID部分(11文字の英数字)が実際の動画と一致しているかはYouTubeで動画を開いてアドレスバーの`v=`以降の文字列と照合します。1文字でも違うと別の動画または404になります。

AIにautoplay(自動再生)を含めるよう指示した場合、モダンブラウザは音声付きの自動再生をポリシーでブロックします。自動再生させるには`autoplay=1&mute=1`(音声ミュート)を組み合わせる必要があります。AIがautoplay=1だけを設定したコードを出した場合は手動でmute=1を追加してください。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

相手側で確認すること

AIが生成したHTMLを相手に共有して「動画が見えない」と連絡が来た場合、まず相手に「動画の場所に何が表示されているか」を確認します。「グレーのボックスに×アイコン」であればsrc URLが無効、「再生ボタンはあるがクリックしても動かない」ならautoplay関連の問題、「iframeが見えない」ならCSSの問題です。

相手がモバイル環境でHTMLを開いている場合、iframeの横幅が画面幅に固定値(px)で設定されていると、画面からはみ出して再生できない状態になることがあります。AIへのプロンプトに「レスポンシブ対応でwidth:100%・aspect-ratio:16/9にしてください」と追加すると、この問題を最初から防げます。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

再発防止の運用

YouTube埋め込みHTMLをAIに生成させるときのプロンプトテンプレートを用意します。例:「次のYouTube URLの動画を埋め込んだHTMLを作成してください。[URL] iframeのsrcはhttps://www.youtube.com/embed/VIDEOID形式にし、widthは100%・aspect-ratio:16/9でレスポンシブ対応にしてください。autoplayは使わないでください」。このテンプレートを使うことで一般的な失敗パターンをほぼ回避できます。

AIが生成したHTMLをシークレットウィンドウでプレビューし、動画が再生できることを確認してから共有するルールを設けます。AIの出力は正しそうに見えても動作確認が必須です。ギガサイト便などプレビューURLで確認できるサービスを活用すると、確認→共有の一連の流れをスムーズに完結できます。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

よくある質問

AIに「この動画を埋め込んで」と動画URLを渡したのに違う動画IDが生成されました。

AIがURLを正確に解釈せず内部で別の動画IDを生成することがあります。出力されたHTMLのiframe srcの動画IDと、元のYouTube URLのv=以降の11文字が一致しているか必ず目視確認し、違う場合は手動で書き換えてください。

AIに音声なし自動再生の動画を作ってもらいましたが、iPhoneで動きません。

iOSのSafariは`muted`属性と`playsinline`属性が両方ないとautoplayを拒否します。iframeではなくvideo要素を使う場合は両属性を必ず追加してください。YouTubeのiframeの場合は`autoplay=1&mute=1&playsinline=1`をURLパラメータに加えます。

プロンプトを工夫しても毎回動かないコードが生成されます。どうすればよいですか?

AIへの依存をなくす方法として、YouTubeの「共有」→「埋め込む」から取得したiframeコードをそのまま使い、AIにはそのコードをHTML内の指定箇所に入れてもらうだけにする分担が有効です。コア部分は人間が用意することで品質が安定します。

関連記事

トラブルシュート

YouTube埋め込みが表示されないときの原因と直し方

YouTubeのiframeをHTMLに埋め込んだが閲覧者に動画が表示されない問題で困っている方向け。動画の公開設定・埋め込み許可・ブラウザのCSP・ネットワーク制限など原因別の確認方法と修正手順を解説します。

5分で読める
トラブルシュート

PDF埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト

AI生成HTMLでPDF埋め込みが共有先で表示されない問題を、プロンプトの改善で未然に防ぎたいエンジニア・デザイナー向け。有効なプロンプトパターンと生成後の確認方法を具体的に紹介し、PDF表示に強いHTML設計の指針をまとめます。

6分で読める
トラブルシュート

PDF埋め込みが表示されないときの原因と直し方

AI生成HTMLのPDF埋め込みが共有先で表示されない問題に直面したWeb担当者・デザイナー向け。ブラウザのPDFビューア設定差・パス問題・CSPエラーを原因別に切り分け、確実に表示させるための修正方法を解説します。

6分で読める
「トラブルシュート」の記事をもっと見る →