---
title: "Chromeで動画が自動再生されない問題をAI生成HTMLで防ぐプロンプト"
description: "AI生成HTMLでChromeの動画自動再生が機能しない問題を防ぎたい方向け。プロンプトに追加すべきmuted・autoplay・フォーマット指定と、生成後にDevToolsで検証する手順、ギガサイト便でのZIP公開方法を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/chrome-video-autoplay-ai-prompt"
markdown: "https://giga-site.com/articles/chrome-video-autoplay-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Chromeで動画が自動再生されない問題をAI生成HTMLで防ぐプロンプト

ChatGPTやClaudeにHTMLを生成させると、動画の自動再生属性が不完全なまま出力されることが多くあります。プロンプトに正確な条件を含めるだけで、Chromeの自動再生ポリシーに準拠したHTMLを最初から得られます。実際に使えるプロンプト例と確認手順を紹介します。

> Source HTML: https://giga-site.com/articles/chrome-video-autoplay-ai-prompt
> Article index: https://giga-site.com/articles/index.md

## よくある原因

AIはChrome自動再生ポリシーを知っていますが、明示的に指示しないとmutedを省いた`<video autoplay src="...">`を出力することがあります。特に「背景動画を追加して」という簡潔な指示では、ポリシー準拠の属性セットではなく最もシンプルな構文を優先します。プロンプトで属性を列挙するだけで改善します。

JavaScriptで動的に動画を挿入するコードをAIが生成した場合、`video.play()`をページロード直後に呼ぶコードが出力されやすいです。Chrome 66以降このパターンはブロックされます。プロンプトに「DOMContentLoadedではなくユーザーのクリックイベント内でplay()を呼ぶか、またはhtmlタグにautoplay muted属性で代替して」と指示すると正しいコードが出力されます。

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

## 自分側で確認すること

AIから受け取ったHTMLの`<video`タグを検索し、属性リストを確認します。`autoplay muted loop playsinline`の4つが揃っていれば合格です。一つでも欠けている場合は「videoタグにautoplay muted loop playsinlineを追加して」と追加指示します。AIは差分修正の指示に素直に従います。

生成されたHTMLをChromeにドラッグして開き、シークレットウィンドウで3秒以内に動画が再生されるかを確認します。再生されない場合はDevToolsのConsoleを開き、エラーメッセージを確認します。「play() request was interrupted」はスクリプトの問題、「ERR_FILE_NOT_FOUND」は動画ファイルのパス問題です。

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

## 相手側で確認すること

ギガサイト便で公開後に受取側から「動画が動かない」と報告があった場合、まずURLが`https://`で始まるかを確認してもらいます。httpのURLやfile://プロトコルでは動画のオートプレイがブロックされることがあります。ギガサイト便が発行するURLは常にHTTPSなので、そのURLをコピペして開いてもらうよう案内します。

「ページを開いてすぐに動画が動くか、5秒待っても動かないか」を相手に確認してもらうと、自動再生ブロックとファイル読み込みエラーの切り分けができます。5秒以上かかって再生される場合は動画ファイルが大きすぎてダウンロードに時間がかかっている可能性があり、圧縮や別ホストへのCDN配信を検討する必要があります。

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

## 再発防止の運用

動画を含むHTMLを生成するときの固定プロンプト文例：「動画要素は必ず`<video autoplay muted loop playsinline>`形式にすること。JavaScriptでplay()を使う場合はvideo.muted = trueを先に設定すること。動画フォーマットはMP4（H.264）のみ使用し、srcはHTMLと同じディレクトリのファイル名を指定すること。」

このプロンプト文をスニペットツール（Raycast・TextExpanderなど）に登録しておくと、`/vid`などの短縮キーで即座に展開できます。毎回コピペする手間を省き、設定漏れのリスクも排除できます。

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

## よくある質問

### プロンプト通りに指示してもAIが毎回違う属性を出力します

AIのレスポンスは確率的なため完全に一致しないことがあります。生成後に「videoタグの属性をautoplay muted loop playsinlineに修正して出力し直して」と後から指示する方が確実です。生成→確認→修正指示の3ステップをルーティンにしましょう。

### AIが動画ファイルをBase64で埋め込んだHTMLを出力しました。このまま使えますか

Base64埋め込みはファイルサイズが1.3倍に膨れ、ページ読み込みが大幅に遅くなります。数秒程度の短い動画でも数十MBになるため、ギガサイト便へのアップロードサイズ制限に引っかかることがあります。別ファイルとしてZIPに含める方式に修正してもらいましょう。

### 生成したHTMLの動画がPCのChromeでは動くのに、スマートフォンのChromeで止まります

スマートフォンChromeはデータセーバー設定が有効だと動画の自動再生を制限する場合があります。また動画ファイルが大きい場合、モバイル回線では読み込みが間に合わず再生されません。動画を2MB以下に圧縮するか、poster属性でサムネイルを設定して手動再生をUIに組み込むことを検討してください。

## 関連記事

- [Chromeで動画が自動再生されないときの原因と直し方](https://giga-site.com/articles/chrome-video-autoplay-fix/index.md)
- [Chromeで動画が自動再生されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/chrome-video-autoplay-checklist/index.md)
- [Chromeで動画が自動再生されないときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/chrome-video-autoplay-request-message/index.md)
- [OGP画像が更新されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/ogp-image-not-updating-ai-prompt/index.md)
- [ファビコンが更新されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/favicon-cache-ai-prompt/index.md)
- [QRコードで開くと404になる問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/qr-404-ai-prompt/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Chromeで動画が自動再生されない問題をAI生成HTMLで防ぐプロンプト",
  "description": "AI生成HTMLでChromeの動画自動再生が機能しない問題を防ぎたい方向け。プロンプトに追加すべきmuted・autoplay・フォーマット指定と、生成後にDevToolsで検証する手順、ギガサイト便でのZIP公開方法を解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/chrome-video-autoplay-ai-prompt",
  "url": "https://giga-site.com/articles/chrome-video-autoplay-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が毎回違う属性を出力します",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "AIのレスポンスは確率的なため完全に一致しないことがあります。生成後に「videoタグの属性をautoplay muted loop playsinlineに修正して出力し直して」と後から指示する方が確実です。生成→確認→修正指示の3ステップをルーティンにしましょう。"
      }
    },
    {
      "@type": "Question",
      "name": "AIが動画ファイルをBase64で埋め込んだHTMLを出力しました。このまま使えますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Base64埋め込みはファイルサイズが1.3倍に膨れ、ページ読み込みが大幅に遅くなります。数秒程度の短い動画でも数十MBになるため、ギガサイト便へのアップロードサイズ制限に引っかかることがあります。別ファイルとしてZIPに含める方式に修正してもらいましょう。"
      }
    },
    {
      "@type": "Question",
      "name": "生成したHTMLの動画がPCのChromeでは動くのに、スマートフォンのChromeで止まります",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "スマートフォンChromeはデータセーバー設定が有効だと動画の自動再生を制限する場合があります。また動画ファイルが大きい場合、モバイル回線では読み込みが間に合わず再生されません。動画を2MB以下に圧縮するか、poster属性でサムネイルを設定して手動再生をUIに組み込むことを検討してください。"
      }
    }
  ]
}
```