JSFiddle - React, Tailwind, and code Playground

by Bertrand Martel

HTML

<script src="https://www.youtube.com/iframe_api"></script>
<div class="video-container">
  <div data-id="YE7VzlLtp-4"></div>
</div>
<div class="video-container">
    <div data-id="3IXKIVZ9T-U"></div>
</div>

JavaScript

function onYouTubePlayerAPIReady() {
  players = document.querySelectorAll('.video-container div')
  for (var i = 0; i < players.length; i++) {
    var player = new YT.Player(players[i], {
      videoId: players[i].dataset.id,
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      },
      playerVars: {
        'autoplay': 1,
        'loop': 1,
        'controls': 0,
        'showinfo': 0,
        'modestbranding': 1
      }
    });
  }
}

function onPlayerReady(event) {
  loopStart(event.target);
  event.target.playVideo();
}

function loopStart(player) {
  player.seekTo(7); // Start at 7 seconds
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING) {
    setTimeout(function() {
      loopStart(event.target);
    }, 5000); // After 5 seconds, restart the loop
  }
}