JSFiddle - React, Tailwind, and code Playground

Youtube Iframe Playlist object ,,, forked from http://jsfiddle.net/onigetoc/6cexzkrd/

by dledle2

HTML

<script src="//www.youtube.com/player_api"></script>
<div id="player"></div>

JavaScript

/**
 * Put your video IDs in this array
 */
var videoIDs = [
  'kJQP7kiw5Fk',
  '2cv2ueYnKjg',
  'nfs8NYg7yQM',
  'ClU3fctbGls'
];

var player, currentVideoId = 0;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    playerVars: {
      controls: 1,
      showinfo: 0,
      rel: 0,
      showsearch: 0,
      iv_load_policy: 3
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  event.target.loadVideoById(videoIDs[currentVideoId]);
}

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.ENDED) {
    currentVideoId++;
    if (currentVideoId < videoIDs.length) {
      player.loadVideoById(videoIDs[currentVideoId]);
    }
  }
}