埋め込んだYouTube動画を自動再生させる方法｜autoplayとmuteの必須設定・ループ再生まで

2024.05.27

YouTubeの動画をブログやWebサイトに埋め込むとき、ページを開いたら自動で再生させたい場面があります。ただし、ここで多くの人がつまずくのが「autoplay=1 を付けたのに再生されない」という問題です。原因は、現在のブラウザが音声つきの自動再生をブロックしていることにあります。この記事では、確実に自動再生させるための正しいパラメータの付け方を、つまずきポイントとあわせて解説します。

この記事の結論：自動再生にはautoplay=1 と mute=1 をセットで指定します。さらにiframeタグに allow="autoplay" を付けます。音声つきでの自動再生はブラウザが原則ブロックするため、ミュート（消音）が自動再生成功の必須条件です。
スポンサーリンク

YouTube動画の埋め込みコードを取得する

まず、YouTubeの動画ページで「共有」→「埋め込む」を選び、表示された埋め込みコードをコピーします。通常は次のような形式です。

取得した状態の埋め込みコード
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0" allowfullscreen></iframe>

VIDEO_ID の部分が動画ごとの固有IDです。このコードに自動再生用のパラメータを追記していきます。

自動再生のパラメータを追加する

自動再生には、src のURL末尾に ?autoplay=1&mute=1 を追加し、iframeタグに allow="autoplay" を付けます。完成形は次のとおりです。

自動再生（ミュート）させる埋め込みコード
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1"
  frameborder="0" allow="autoplay" allowfullscreen></iframe>
音声つきの自動再生はブラウザがブロックします。Chrome・Safari・Firefox などは、ユーザーの操作（クリックなど）なしに音が鳴る自動再生を原則として停止します（自動再生ポリシー）。そのため autoplay=1 単体ではほぼ再生されず、mute=1 を付けてミュート再生にすることで確実に自動再生できます。

すでにURLに ? 付きのパラメータがある場合は、2つめ以降を & でつないで追記します（例: ...embed/VIDEO_ID?rel=0&autoplay=1&mute=1）。

よく使う再生パラメータ一覧

パラメータ 意味 指定例
autoplay 自動再生する autoplay=1
mute ミュート（自動再生に必須） mute=1
loop ループ再生（playlist併用が必要） loop=1
playlist ループ対象の動画ID（loop用） playlist=VIDEO_ID
controls 操作バーの表示（0で非表示） controls=0
start 再生開始位置（秒） start=30
playsinline iOSで全画面化せず再生 playsinline=1

自動再生しながらループさせる

背景動画のように「自動再生＋無限ループ」させたい場合は、loop=1 に加えて playlist に同じ動画IDを指定します。YouTubeの仕様上、loop単体ではループしないため、playlistの指定が必須です。

自動再生＋ループ＋iOS対応
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=VIDEO_ID&playsinline=1"
  frameborder="0" allow="autoplay" allowfullscreen></iframe>
スマホでは playsinline=1 を付けないと、再生時に動画が全画面に切り替わることがあります。インライン（その場）で再生させたい場合は必ず指定してください。

自動再生されないときのチェックポイント

  • mute=1 を付けているか（音ありの自動再生はブロックされます）
  • iframeタグに allow="autoplay" があるか
  • URLのパラメータの区切りが ?（1つめ）と &（2つめ以降）になっているか
  • ブラウザの省電力モードや拡張機能で、自動再生が個別に止められていないか
  • 動画側で埋め込み・自動再生が許可されているか（一部の動画は埋め込み不可）

関連するYouTube埋め込みのテクニック

画面幅に合わせて動画サイズを調整したい場合はYouTube動画をレスポンシブに埋め込む方法、ショート動画を埋め込みたい場合はYouTubeショートをウェブサイトに埋め込む方法が参考になります。メインビジュアルの背景に動画を流すならjquery.mb.YTPlayerで背景動画にする方法、クリックでポップアップ再生させたいならmodal-video.jsでモーダル表示する方法もあわせてどうぞ。

よくある質問（FAQ）

Qautoplay=1 を付けたのに自動再生されません。なぜですか？
A音声つきの自動再生がブラウザにブロックされているためです。mute=1 を一緒に指定してミュート再生にすると自動再生されます。これは特定のブラウザの不具合ではなく、各ブラウザ共通の自動再生ポリシーによる仕様です。
Q音を出した状態で自動再生することはできませんか？
A基本的にはできません。ユーザーがページ上で何らかの操作（クリックなど）をした後であれば音つき再生が許可される場合がありますが、ページを開いた直後の音つき自動再生はほとんどのブラウザで止められます。まずはミュートで再生し、ユーザー操作で音を出す設計が安全です。
Qループ再生させたいのに1回で止まってしまいます。
Aloop=1 だけではループしません。playlist に同じ動画IDを指定してください（例: loop=1&playlist=VIDEO_ID）。これでYouTube側がループ再生を行います。
Qスマホで再生すると勝手に全画面になります。
Aplaysinline=1 を追加してください。これを付けると、iOSなどでも全画面化せずページ内（インライン）で再生されます。

まとめ

YouTube動画を自動再生させるポイントを整理します。

  • 自動再生は autoplay=1 ＋ mute=1 をセットで指定する
  • iframeタグに allow="autoplay" を付ける
  • 音声つきの自動再生はブラウザがブロックするため、ミュートが必須
  • ループは loop=1&playlist=VIDEO_ID、スマホ対応は playsinline=1
  • 再生されないときは、mute・allow属性・パラメータの区切りを確認する

埋め込みのサイズ調整はレスポンシブ埋め込み、応用は背景動画・モーダル表示の記事もあわせて参考にしてください。