JSFiddle - React, Tailwind, and code Playground

by Bertrand Martel

HTML

<iframe id="ytplayer0" src="https://www.youtube.com/embed/ab0TSkLe-E0?controls=1&showinfo=0&rel=0&enablejsapi=1" frameborder="0" allowfullscreen>
</iframe>

<iframe id="ytplayer1" src="https://www.youtube.com/embed/QVGeilNsJFU?controls=1&showinfo=0&rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

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_attr = new Array();

players_attr["ytplayer0"] = {
  events: {
    'onReady': onPlayer1Ready
  }
};
players_attr["ytplayer1"] = {
  events: {
    'onReady': onPlayer2Ready
  }
};

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

function onPlayer1Ready() {
  players["ytplayer0"].playVideo();
  players["ytplayer0"].mute();
}

function onPlayer2Ready() {
  players["ytplayer1"].playVideo();
  players["ytplayer1"].mute();
}