JSFiddle - React, Tailwind, and code Playground

by Bertrand Martel

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="sidebar">
  <h1>Playlist (1): Birds</h1>
  <div class="container">
    <div class="ypt_wrapper">
      <div class="video embed-container">
        <div id="ytpl-player1" data-pl="PLBhKKjnUR0XB8DwQwXqBsChb48E8jzfr-">
        </div>
      </div>
      <div>
        <h2 class="ytpl-title"></h2>
        <div class="ytpl-desc"></div>
      </div>
      <div class="ytpl-flexslider">
        <ul class="ytpl--thumbs slides"></ul>
      </div>
    </div>
  </div>
</div>

<div class="sidebar">
  <h1>Playlist (2): Owls</h1>
  <div class="container">
    <div class="ypt_wrapper">
      <div class="video embed-container">
        <div id="ytpl-player2" data-pl="PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An">
        </div>
      </div>
      <div>
        <h2 class="ytpl-title"></h2>
        <div class="ytpl-desc"></div>
      </div>
      <div class="ytpl-flexslider">
        <ul class="ytpl--thumbs slides"></ul>
      </div>
    </div>
  </div>
</div>

<div class="sidebar">
  <h1>Playlist (3): Misc. Animals</h1>
  <div class="container">
    <div class="ypt_wrapper">
      <div class="video embed-container">
        <div id="ytpl-player3" data-pl="PLBhKKjnUR0XCGuLxsESq7WMlIwZIH9tIi">
        </div>
      </div>
      <div>
        <h2 class="ytpl-title"></h2>
        <div class="ytpl-desc"></div>
      </div>
      <div class="ytpl-flexslider">
        <ul class="ytpl--thumbs slides"></ul>
      </div>
    </div>
  </div>
</div>

CSS

body {
  margin: 0 auto;
}

h1 {
  font-weight: 400;
  color: #666666;
  font-family: Arial;
  font-size: 18px;
  margin: 0 0 20px 0;
}

.sidebar {
  width: 300px;
  padding: 20px;
  box-sizing: border-box;
  background-color: #dddddd;
  display: inline-block;
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

.embed-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ytpl--thumbs {
  max-width: 100%;
  box-sizing: border-box;
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
}

.ytpl--thumbs li {
  list-style: none;
  position: relative;
  float: left;
  width: 50%;
  line-height: 0;
}

.ytpl--thumbs li:nth-child(1) {
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top: 10px;
  box-sizing: border-box;
}

.ytpl--thumbs li:nth-child(2) {
  padding-left: 5px;
  padding-bottom: 5px;
  padding-top: 10px;
  box-sizing: border-box;
}

.ytpl--thumbs li:nth-child(3) {
  padding-right: 5px;
  padding-top: 5px;
  box-sizing: border-box;
}

.ytpl--thumbs li:nth-child(4) {
  padding-left: 5px;
  padding-top: 5px;
  box-sizing: border-box;
}

.ytpl--thumbs img,
.embed-container {
  max-width: 100%;
  box-sizing: border-box;
  background-color: rgba(0,0,0,.25);
}

.ytpl--thumbs p {
  display: none;
  position: absolute;
  margin: 0;
}

.ytpl--thumbs button {
  background: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 0;
  opacity: .8;
  transition: all 0.5s ease;
}

.ytpl--thumbs button:hover {
  cursor: pointer;
  opacity: 1;
}

.ytpl--thumbs button:hover p,
.ytpl--thumbs button p {
  display: none;
}

.ytpl-playing p {
  display: block;
}

#ytpl-title,
#ytpl-desc {
  display: none;
}

JavaScript

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 players = new Array();
var players_list = ["ytpl-player1", "ytpl-player2", "ytpl-player3"];

var nowPlaying = "ytpl-playing";
var nowPlayingClass = "." + nowPlaying;

function getPlaylistData(playerName) {
    var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38';
    var url = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet';
    var data = {
        'playlistId': $('#' + playerName).data('pl'),
        'key': apiKey,
        'maxResults': 4
    };
    
    $.get(url, data, function(e) {
        buildHTML(playerName, e.items)
    })
}

function buildHTML(playerName, data) {
    var list_data = '';
    data.forEach(function(e, i) {
        var item = e.snippet;
        if (item.thumbnails) {
            list_data += '<li><button data-ytpl-index="' + i + '" data-ytpl-title="' + item.title + '" data-ytpl-desc="' + item.description + '"><p>' + item.title + '</p><img alt="' + item.title + '" src="' + item.thumbnails.medium.url + '"/></button></li>';
        }
    });
    $('#' + playerName).closest('.ypt_wrapper').find('.ytpl--thumbs').html(list_data);
}

// generate playlist items once main player has loaded
function onPlayerReady(event) {
    getPlaylistData(event.target.name);
}

function onYouTubeIframeAPIReady() {
    for (item in players_list) {
        players[players_list[item]] = new YT.Player(players_list[item], {
            height: '360',
            width: '640',
            playerVars: {
                listType: 'playlist',
                list: $('#' + players_list[item]).data('pl')
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
        players[players_list[item]].name = players_list[item];
   ...