JSFiddle - React, Tailwind, and code Playground

by Bertrand Martel

HTML

<div class="video-slider">
  <iframe id="popup-youtube-player-1" width="560" height="315" src="https://www.youtube.com/embed/B_hLfhccYf0?rel=0&enablejsapi=1" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>
<div class="video-slider">
  <iframe id="popup-youtube-player-2" width="560" height="315" src="https://www.youtube.com/embed/ajEtUxjgXJk?rel=0&enablejsapi=1" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>
<div class="video-slider">
  <iframe id="popup-youtube-player-3" width="560" height="315" src="https://www.youtube.com/embed/BYpsEdYNyB0?rel=0&enablejsapi=1" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>
<div class="video-slider">
  <iframe id="popup-youtube-player-4" width="560" height="315" src="https://www.youtube.com/embed/xusKGsLyoNA?rel=0&enablejsapi=1" frameborder="0" allowfullscreen="true" allowscriptaccess="always"></iframe>
</div>

<div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <a class="video-thumb" data-index="1"><img class="responsive-image" src="{{f:10952848}}" alt="Promise for Today Video Thumbnail" /></a>
  </div>
</div>
<div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <a class="video-thumb" data-index="2"><img class="responsive-image" src="{{f:7618238}}" alt="Promise of Opportunity Video Thumbnail" /></a>
  </div>
</div>
<div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <a class="video-thumb" data-index="3"><img class="responsive-image" src="{{f:13134177}}" alt="Thank You Video Thumbnail" /></a>
  </div>
</div>
<div>
  <div class="col-xs-3 col-sm-3 col-md-3">
    <a class="video-thumb" data-index="4"><img class="responsive-image" src="{{f:4121391}}" alt="Promise of Innovation and Partnership Video Thumbnail" /></a>
  </div>
</div>

CSS

.video-slider {
  display: none
}

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 players = new Array();
var players_list = [
  "popup-youtube-player-1",
  "popup-youtube-player-2",
  "popup-youtube-player-3",
  "popup-youtube-player-4"
];

function onYouTubeIframeAPIReady() {
  for (item in players_list) {
    players[players_list[item]] = new YT.Player(players_list[item], {});
  }
}

function pauseVideo() {
  for (item in players_list) {
    players[players_list[item]].pauseVideo();
  }
}

function swapvid(id) {
  pauseVideo();
  $('.video-slider').css('display', 'none');
  $('#' + id).closest('.video-slider').css('display', 'inline');
}

$('.video-thumb').click(function() {
  swapvid('popup-youtube-player-' + $(this).attr('data-index'));
});