JavaScript to control play/pause embedded YouTube videos

Question

I need to embed multiple YouTube videos on a website. For each video, I need to set up an external element (such as a paragraph, image, div, etc) that can trigger the YouTube video to play, and a separate element that will trigger the YouTube video to pause.

I have some Javascript code that I can use to play/pause one embedded YouTube video. However, if I attempt to create play/pause buttons for more than one YouTube video on the same page, only the buttons for the last YouTube video will work.

To demonstrate the issue, I created two JS Fiddles. The first Fiddle shows how it works when there is only one YouTube video on the page.

The second Fiddle shows what happens when I try to create buttons for more than one YouTube video on the same page. As you'll see, only the buttons for the last YouTube video work.

Any suggestions would be greatly appreciated. I've included the JS Fiddle links (and the accompanying code) below. Thank you!

JS Fiddle #1 (1 video) https://jsfiddle.net/IngeniousSolutions/gtfprovc/14/

JS Fiddle #2 (2 videos) https://jsfiddle.net/IngeniousSolutions/4m95ogfd/2/

CODE FOR JS FIDDLE #1

HTML Code for JS Fiddle #1

<p>VIDEO #1</p>
<div class="fullwidth">
    <button id="play-button">PLAY</button>
    <button id="pause-button">PAUSE</button>
    <button id="stop-button">STOP</button>
</div>
<div class="fullwidth">
    <iframe id="video" src="https://www.youtube.com/embed/aIXOyOLkb24?enablejsapi=1&html5=1" frameborder="0"
        allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

CSS Code for JS Fiddle #1:

.fullwidth {width: 100%;}

Javascript Code for JS Fiddle #1

// global variable for the player
var player;
// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
   // create the global player from the specific iframe (#video)
   player = new YT.Player('video', {
      events: {
         // call this function when player is ready to use
         'onReady': onPlayerReady
      }
   });
}

function onPlayerReady(event) {
   var playButton = document.getElementById("play-button");
   playButton.addEventListener("click", function () {
      player.playVideo();
   });
   var pauseButton = document.getElementById("pause-button");
   pauseButton.addEventListener("click", function () {
      player.pauseVideo();
   });
   var stopButton = document.getElementById("stop-button");
   stopButton.addEventListener("click", function () {
      player.stopVideo();
   });
}

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

CODE FOR JS FIDDLE #2

HTML Code for JS Fiddle #2

<p>VIDEO #1</p>
<div class="fullwidth">
   <button id="play-button">PLAY</button>
   <button id="pause-button">PAUSE</button>
   <button id="stop-button">STOP</button>
</div>
<div class="fullwidth">
   <iframe id="video" src="https://www.youtube.com/embed/aIXOyOLkb24?enablejsapi=1&html5=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<p>VIDEO #2</p>
<div class="fullwidth">
   <button id="play-button2">PLAY</button>
   <button id="pause-button2">PAUSE</button>
   <button id="stop-button2">STOP</button>
</div>
<div class="fullwidth">
   <iframe id="video2" src="https://www.youtube.com/embed/4zTCd-k--7A?enablejsapi=1&html5=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

CSS Code for JS Fiddle #2:

.fullwidth {width: 100%;}

Javascript Code for JS Fiddle #2

// global variable for the player
var player;
// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
   // create the global player from the specific iframe (#video)
   player = new YT.Player('video', {
      events: {
         // call this function when player is ready to use
         'onReady': onPlayerReady
      }
   });
}

function onPlayerReady(event) {
   var playButton = document.getElementById("play-button");
   playButton.addEventListener("click", function () {
      player.playVideo();
   });
   var pauseButton = document.getElementById("pause-button");
   pauseButton.addEventListener("click", function () {
      player.pauseVideo();
   });
   var stopButton = document.getElementById("stop-button");
   stopButton.addEventListener("click", function () {
      player.stopVideo();
   });
}

// Javascript for second video

// global variable for the player
var player2;
// this function gets called when API is ready to use
function onYouTubePlayerAPIReady() {
   // create the global player from the specific iframe (#video)
   player2 = new YT.Player('video2', {
      events: {
         // call this function when player is ready to use
         'onReady': onPlayerReady
      }
   });
}

function onPlayerReady(event) {
   var playButton2 = document.getElementById("play-button2");
   playButton2.addEventListener("click", function () {
      player2.playVideo();
   });
   var pauseButton2 = document.getElementById("pause-button2");
   pauseButton2.addEventListener("click", function () {
      player2.pauseVideo();
   });
   var stopButton2 = document.getElementById("stop-button2");
   stopButton2.addEventListener("click", function () {
      player2.stopVideo();
   });
}

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);