JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- click on these to switch the videos -->
<div class="home-video-item" data-tab="tab-1">
  video 1 play
</div>
<div class="home-video-item" data-tab="tab-2">
  video 2 play
</div>

<!-- video boxes -->
<div id="tab-1" class="home-video-content current">
  <iframe id="ytplayer0" width="500" height="281" src="https://www.youtube.com/embed/x6kqVusK26c?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>

<div id="tab-2" class="home-video-content current">
  <iframe id="ytplayer1" width="500" height="281" src="https://www.youtube.com/embed/x6kqVusK26c?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</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 players = new Array();
var iframes = document.getElementsByTagName("iframe");

function onYouTubeIframeAPIReady() {
  for (i = 0; i < iframes.length; i++) {
    players[i] = new YT.Player(iframes[i].id, {});
    players[i].name = iframes[i].id;
  }
}

$('.home-video-item').on('click', function(e) {
  for (i = 0; i < iframes.length; i++) {
    players[i].pauseVideo();
  }
})