過去バージョン

この記事の要点

YouTube iframe 埋め込みは ?loop=1&playlist=VIDEO_ID でループ可能。playlist 必須 HTML5 <video> なら loop 属性を付けるだけ YouTube IFrame Player API なら onStateChange で ENDED 検知して playVideo() YouTube 本家サイトでは動画上で右クリック → ループ再生でブラウザ単体でループ可能 複数動画を順次ループしたい場合は playlist パラメータに複数 ID をカンマ区切り

パターン1: YouTube iframe 埋め込みでループ

YouTube の埋め込みコードに loop=1 と playlist=動画ID を追加します。playlist パラメータが無いとループしません（仕様上の制約）。

<!-- 単一動画をループ再生 -->
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&loop=1&playlist=dQw4w9WgXcQ&mute=1"
  frameborder="0"
  allow="autoplay; encrypted-media"
  allowfullscreen>
</iframe>

主要パラメータ

パラメータ	説明
loop=1	ループ有効。playlist 併用が必須
playlist=ID	ループ対象動画 ID（埋め込み動画と同じ ID）
autoplay=1	自動再生（多くのブラウザで mute=1 必須）
mute=1	ミュート起動
controls=0	コントロール非表示
start=30	30 秒から開始
end=60	60 秒で終了
rel=0	関連動画を同チャンネルのみに制限

パターン2: 複数動画を順次ループ

<!-- 3 つの動画を順次再生してから最初に戻る -->
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO1?loop=1&playlist=VIDEO1,VIDEO2,VIDEO3"
  frameborder="0"
  allowfullscreen>
</iframe>

パターン3: HTML5 video の loop 属性

自前で動画ファイルをホスティングしている場合は <video> の loop 属性が最も簡単です:

<!-- ループ + 自動再生 + ミュート -->
<video src="movie.mp4" loop autoplay muted playsinline></video>

<!-- 複数フォーマット対応 -->
<video loop autoplay muted playsinline>
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  お使いのブラウザは video 要素に対応していません。
</video>

パターン4: YouTube IFrame Player API でループ制御

動画終了時に何か処理を入れたい場合や、複雑な制御が必要な場合は JavaScript API を使います。

<div id="player"></div>

<script>
// YouTube IFrame Player API を読み込み
const tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
document.head.appendChild(tag);

let player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    width: '560',
    height: '315',
    videoId: 'dQw4w9WgXcQ',
    playerVars: {
      autoplay: 1,
      mute: 1,
      controls: 1,
    },
    events: {
      onStateChange: onPlayerStateChange,
    },
  });
}

function onPlayerStateChange(event) {
  // ENDED (0) になったら再生
  if (event.data === YT.PlayerState.ENDED) {
    console.log('動画終了 → ループ');
    player.seekTo(0);
    player.playVideo();
  }
}
</script>

パターン5: 一部区間だけループ

// 30 秒〜60 秒を繰り返す
function onPlayerStateChange(event) {
  if (event.data === YT.PlayerState.PLAYING) {
    checkLoop();
  }
}

function checkLoop() {
  if (!player) return;
  const current = player.getCurrentTime();
  if (current >= 60) {
    player.seekTo(30);
  }
  setTimeout(checkLoop, 500);
}

パターン6: HTML5 video で onended イベント

const video = document.querySelector('video');

video.addEventListener('ended', () => {
  console.log('動画終了 → 再生');
  video.currentTime = 0;
  video.play();
});

// 一部区間のループ
video.addEventListener('timeupdate', () => {
  if (video.currentTime >= 60) {
    video.currentTime = 30;
  }
});

YouTube 本家サイトでのループ再生

動画ページ上で動画上を右クリックすると「ループ再生」というメニュー項目があります。これを選択すると、ブラウザを開いている間は連続ループします。

1. YouTube で動画を開く
2. 動画の上で右クリック
3. 「ループ再生」を選択
4. メニューにチェックが入ればループ有効

スマートフォン版 YouTube アプリでも「歯車 → ループ再生」または再生中の動画長押しでループ可能になりました（バージョン依存）。

外部サービスでループ再生

サービス	URL 形式
listenonrepeat.com	listenonrepeat.com/watch/?v=VIDEO_ID
youtuberepeater.com	youtuberepeater.com/watch?v=VIDEO_ID
infinitelooper.com	区間ループ可能

自動再生がブロックされる問題

Chrome / Safari / Firefox は音声付きの autoplay をブロックします。確実に自動再生したいなら:

• mute=1 (YouTube) / muted (HTML5) を必ず付ける
• ユーザー操作 (クリック / タップ) を契機に再生開始
• iOS Safari は playsinline 属性が必須（インライン再生）

よくあるトラブル

症状	原因	対処
loop=1 を付けたのにループしない	playlist パラメータ無し	playlist=動画ID を追加
自動再生されない	音声付きの autoplay 制限	mute=1 / muted を追加
iOS で全画面になる	playsinline 無し	video に playsinline 追加
ループ時に一瞬黒画面	動画読み直し	preload="auto" 設定 or 2 つの video 切替

FAQ

Q: なぜ playlist パラメータが必要？
A: YouTube の仕様で、loop は「プレイリストを最後まで再生したら最初に戻る」機能のため。単一動画でも playlist に同じ ID を入れるとループ動作になります。

Q: 広告が入るとループが止まる
A: プレロール広告は埋め込みでも表示されることがあります。YouTube Premium で広告無し再生するか、自前ホストの動画にする必要があります。

Q: 縦動画 (Shorts) はループできる？
A: 通常の embed として youtube.com/embed/VIDEO_ID 形式で読めば、Shorts でも loop パラメータが効きます。