JSFiddle - React, Tailwind, and code Playground

by Petko Bossakov

HTML

<script src="https://www.youtube.com/iframe_api"></script>
<div id="players">
  <div id="player0"></div>
  <div id="player1"></div>  
  <!-- add more here -->
</div>

JavaScript

var videos = [
{id:'Bpu0TIXzI1w', start: 7, end: 12},
{id:'HASdmBYHo5Y', start: 554, end: 558}
/* Add more here */
]

function onYouTubeIframeAPIReady() {

	// Embed each video
	for(var i=0; i<videos.length; i++) {

		player_id = 'player' + i;
    videos[i].player = new YT.Player(player_id, {
    	videoId: videos[i].id,
      playerVars: {
      	start: videos[i].start,
        end: videos[i].end,
        autohide: 1,
        modestbranding: 1,
        rel: 0
      },
      height: '390',
      width: '640',
      events: {
        'onStateChange': onPlayerStateChange
      }
    });  
	}
}

function onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.ENDED) {

		// Restart loop
    var player = event.target;
    var iframe = player.f;
		var player_idx = iframe.id.replace('player', '');
    
	  var s = videos[player_idx].start;
		player.seekTo(s);

	}
}

var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
document.body.appendChild(tag);