Приостановите все остальные видео Youtube на странице, когда начнется воспроизведение следующего

Question

Я настраиваю раздел видео на странице коллекции в Shopify, где я включил видео, заменяющее изображения для каждого продукта.

Мне нужно воспроизводить по одному видео за раз, а не воспроизводить два видео одновременно.Когда я щелкаю текущее видео, чтобы воспроизвести все предыдущие, воспроизводимые видео должны быть приостановлены.Как я могу это сделать?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<div class="video_wrapper video_wrapper_full js-videoWrapper">
  <iframe class="videoIframe js-videoIframe yt_players" id="player{{ forloop.index }}" src="http://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowTransparency="true" allowfullscreen></iframe>
  <button class="videoPoster js-videoPoster"></button>
</div>

players = new Array();

function onYouTubeIframeAPIReady() {
  var temp = $("iframe.yt_players");

  for (var i = 0; i < temp.length; i++) {
    var t = new YT.Player($(temp[i]).attr('id'), {
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
    players.push(t);
  }
}

onYouTubeIframeAPIReady();

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING) {
    var temp = event.target.a.src;
    var tempPlayers = $("iframe.yt_players");
    for (var i = 0; i < players.length; i++) {
      if (players[i].a.src != temp) players[i].stopVideo();
    }
  }
}