---
title: "YouTube埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト"
description: "ChatGPTやClaudeなどのAIにYouTube埋め込みHTMLを生成させたがうまく動かない、という経験をした方向け。誤出力のパターンと、それを防ぐプロンプトの書き方を実例つきで解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/youtube-embed-hidden-ai-prompt"
markdown: "https://giga-site.com/articles/youtube-embed-hidden-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# YouTube埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト
AIツールでYouTube埋め込みのHTMLを生成させると、動画IDの誤記・非対応URLフォーマット・autoplay設定ミスなど複数のパターンで動かないコードが出力されることがあります。どのようなプロンプトを渡せば最初から動くコードを得られるか、具体的な書き方を紹介します。
> Source HTML: https://giga-site.com/articles/youtube-embed-hidden-ai-prompt
> Article index: https://giga-site.com/articles/index.md
## よくある原因
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埋め込みが表示されないときの原因と直し方](https://giga-site.com/articles/youtube-embed-hidden-fix/index.md)
- [YouTube埋め込みが表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/youtube-embed-hidden-checklist/index.md)
- [YouTube埋め込みが表示されないときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/youtube-embed-hidden-request-message/index.md)
- [PDF埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/pdf-embed-hidden-ai-prompt/index.md)
- [Googleマップ埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/google-map-embed-hidden-ai-prompt/index.md)
- [PDF埋め込みが表示されないときの原因と直し方](https://giga-site.com/articles/pdf-embed-hidden-fix/index.md)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "YouTube埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト",
"description": "ChatGPTやClaudeなどのAIにYouTube埋め込みHTMLを生成させたがうまく動かない、という経験をした方向け。誤出力のパターンと、それを防ぐプロンプトの書き方を実例つきで解説します。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/youtube-embed-hidden-ai-prompt",
"url": "https://giga-site.com/articles/youtube-embed-hidden-ai-prompt",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "トラブルシュート",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "AIに「この動画を埋め込んで」と動画URLを渡したのに違う動画IDが生成されました。",
"acceptedAnswer": {
"@type": "Answer",
"text": "AIがURLを正確に解釈せず内部で別の動画IDを生成することがあります。出力されたHTMLのiframe srcの動画IDと、元のYouTube URLのv=以降の11文字が一致しているか必ず目視確認し、違う場合は手動で書き換えてください。"
}
},
{
"@type": "Question",
"name": "AIに音声なし自動再生の動画を作ってもらいましたが、iPhoneで動きません。",
"acceptedAnswer": {
"@type": "Answer",
"text": "iOSのSafariは`muted`属性と`playsinline`属性が両方ないとautoplayを拒否します。iframeではなくvideo要素を使う場合は両属性を必ず追加してください。YouTubeのiframeの場合は`autoplay=1&mute=1&playsinline=1`をURLパラメータに加えます。"
}
},
{
"@type": "Question",
"name": "プロンプトを工夫しても毎回動かないコードが生成されます。どうすればよいですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "AIへの依存をなくす方法として、YouTubeの「共有」→「埋め込む」から取得したiframeコードをそのまま使い、AIにはそのコードをHTML内の指定箇所に入れてもらうだけにする分担が有効です。コア部分は人間が用意することで品質が安定します。"
}
}
]
}
```