JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<div id="video0"></div>
<br/><br/><hr/><br/>
<div id="video1"></div>
<br/><br/><hr/><br/>
<div id="video2"></div>

JavaScript

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player = [];

function onYouTubeIframeAPIReady() {
  player[0] = new YT.Player('video0', {
    height: '390',
    width: '640',
    videoId: '0QuVBXjXx6Y',
    events: {
      'onReady': onPlayerReady
    }
  });
  player[1] = new YT.Player('video1', {
    height: '390',
    width: '640',
    videoId: 'dVxD9AEDt1c',
    events: {
      'onReady': onPlayerReady
    }
  });
  player[2] = new YT.Player('video2', {
    height: '390',
    width: '640',
    videoId: '_hzmiUOer7E',
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
	var autoplay = false; //change false to tru for autoplay
  
  if (autoplay){
  	event.target.playVideo();
  }
}