Playing one YouTube video at a time

[javascriptcoding5678]

What would I adjust in this code so that only one video is able to play at a time? Setting it up so that if I click on another video, the video before it will pause? This is something I’ve been trying to do and can’t seem to figure out how to.

How would this be done? What piece of code would I add to it for this functionality to occur?

Code
https://jsfiddle.net/d72Lp43v/293/

const videoPlayer = (function makeVideoPlayer() {
  "use strict";

  function loadPlayer() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(50); // percent
  }

  function onPlayerStateChange(event) {

  }

  function addVideo(video, desiredPlayerVars) {
    const videoId = video.getAttribute("data-id");
    const defaultPlayerVars = {
      autoplay: 1,
      controls: 1,
      showinfo: 1,
      rel: 0,
      iv_load_policy: 3,
      cc_load_policy: 0,
      fs: 0,
      disablekb: 1
    };
    const playerVars = Object.assign(defaultPlayerVars, desiredPlayerVars);
    new YT.Player(video, {
      width: 200,
      height: 200,
      videoId: videoId,
      // defaultPlayerVars,
      playerVars,
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  }
  let apiIsReady = false;
  let timer;
  window.onYouTubePlayerAPIReady = function() {
    apiIsReady = true;
  };
  // function init(video) {
  function init(opts) {
    loadPlayer();
    timer = setInterval(function checkAPIReady() {
      if (apiIsReady) {
        timer = clearInterval(timer);
        addVideo(opts.video, opts.playerVars || {});
      }
    }, 100);
  }
  return {
    init
  };
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 900,
        end: 1200
      }
    });
  }
  const cover = document.querySelector(".playa");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playb");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playc");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playd");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playe");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playf");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playg");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playh");
  cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init({
      video: wrapper.querySelector(".video"),
      playerVars: {
        start: 30,
        end: 50
      }
    });
  }
  const cover = document.querySelector(".playi");
  cover.addEventListener("click", coverClickHandler);
}());