JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ytplayer1"></div>
<div id="ytplayer2"></div>

JavaScript

// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var videoId = 'M7lc1UVf-VE';
var startSeconds = 36;
var endSeconds = 39;

// Replace the 'ytplayer'1/2 elements with an <iframe> and
// YouTube player after the API code downloads.
var player1;
var player2;

var player1Config = {
  height: '180',
  width: '320',
  videoId: videoId,
  playerVars: {
    autoplay: 1, // Auto-play the video on load
    controls: 0, // Show pause/play buttons in player
    showinfo: 0, // Hide the video title
    modestbranding: 1, // Hide the Youtube Logo
    fs: 1, // Hide the full screen button
    cc_load_policy: 0, // Hide closed captions
    iv_load_policy: 3, // Hide the Video Annotations
    start: startSeconds,
    end: endSeconds,
    autohide: 0 // Hide video controls when playing
  }
};

// duplicate the options from player1 but with a different callback
var player2Config = Object.assign({}, player1Config);
player1Config.events = {
	'onStateChange': onStateChange1
};
player2Config.events = {
	'onStateChange': onStateChange2
};

function onYouTubePlayerAPIReady() {
  player1 = new YT.Player('ytplayer1', player1Config);
  player2 = new YT.Player('ytplayer2', player2Config);
}

function onStateChange1(state) {
  if (state.data === YT.PlayerState.ENDED) {
    player1.loadVideoById({
      videoId: videoId,
      startSeconds: startSeconds,
      endSeconds: endSeconds
    });
  }
}

function onStateChange2(state) {
  if (state.data === YT.PlayerState.ENDED) {
    player2.seekTo(startSeconds);
  }
}