Ремодальный скрипт "мульти видео модал" с YouTube iframe

Question

Мне нужен модальный видеофильм "remodal script" с youtube iframe.

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

  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement("script");
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player("player", {
      height: "100%",
      width: "100%",
      videoId: "Xa0Q0J5tOP0",
      playerVars: {
        autoplay: 1,
        mute: 1,
        controls: 1,
        info: 0,
        showinfo: 0,
        rel: 0,
        modestbranding: 1,
        wmode: "transparent"
      },
      events: {
        onReady: onPlayerReady,
        onStateChange: onPlayerStateChange
      }
    });
  }
  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    // event.target.playVideo();  
  }
  // 5. The API calls this function when the player's state changes.
  var done = false;

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      done = true;
    }
  }

  function stopVideo() {
    player.stopVideo();
  }
  // remodal events //
  $(document).on("opening", ".remodal", function() {
    player.playVideo();
  });
  $(document).on("closing", ".remodal", function(e) {
    player.stopVideo();
  });

/* MODAL */
html.remodal-is-locked {
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
}
.remodal,
[data-remodal-id] {
  display: none;
}
.remodal-overlay {
  position: fixed;
  z-index: 9999;
  top: -5000px;
  right: -5000px;
  bottom: -5000px;
  left: -5000px;
  display: none;
}
.remodal-wrapper {
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  overflow: auto;
  text-align: center;
  -webkit-overflow-scrolling: touch;
}
.remodal-wrapper:after {
  display: inline-block;
  height: 100%;
  margin-left: -0.05em;
  content: "";
}
.remodal-overlay,
.remodal-wrapper {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.remodal {
  position: relative;
  outline: none;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.remodal-is-initialized {
  /* Disable Anti-FOUC */
  display: inline-block;
}

.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}
.remodal-overlay {
  background: rgba(0, 0, 0, 0.8);
}
.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.remodal-overlay.remodal-is-opening {
  -webkit-animation-name: remodal-overlay-opening-keyframes;
  animation-name: remodal-overlay-opening-keyframes;
}
.remodal-overlay.remodal-is-closing {
  -webkit-animation-name: remodal-overlay-closing-keyframes;
  animation-name: remodal-overlay-closing-keyframes;
}
.remodal-wrapper {
  padding: 10px 10px 0;
}
.remodal {
  box-sizing: border-box;
  width: 100%;
  text-align:center;
  margin-bottom: 10px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}
.remodal iframe, .remodal img {
	display:inline-block;
	max-width:100%;
	border:none;
	height:auto;
}
.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.remodal.remodal-is-opening {
  -webkit-animation-name: remodal-opening-keyframes;
  animation-name: remodal-opening-keyframes;
}
.remodal.remodal-is-closing {
  -webkit-animation-name: remodal-closing-keyframes;
  animation-name: remodal-closing-keyframes;
}
.remodal,
.remodal-wrapper:after {
  vertical-align: middle;
}

@-webkit-keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);

    opacity: 0;
  }
  to {
    -webkit-transform: none;
    transform: none;

    opacity: 1;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}
@keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);

    opacity: 0;
  }
  to {
    -webkit-transform: none;
    transform: none;

    opacity: 1;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}
@-webkit-keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);

    opacity: 1;
  }
  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);

    opacity: 0;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}
@keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);

    opacity: 1;
  }
  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);

    opacity: 0;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}
@-webkit-keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@media only screen and (min-width: 641px) {
  .remodal {
    max-width: 700px;
  }
}
.lt-ie9 .remodal-overlay {
  background: #2b2e38;
}
.lt-ie9 .remodal {
  width: 700px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.0/remodal.min.js"></script>

<a class="btn btn-primary" href="#modal">
   Modal video one
</a>

<section class="remodal" data-remodal-id="modal">
  <button data-remodal-action="close" title="Close" class="remodal-close"></button>
  <div class="video-container" id="responsive-wrapper">
    <div id="player"></div>
  </div>
</section>

<br><br><br>

<a class="btn btn-primary" href="#modaltwo">
   Modal video two
</a>

<section class="remodal" data-remodal-id="modaltwo">
  <button data-remodal-action="close" title="Close" class="remodal-close"></button>
  <div class="video-container" id="responsive-wrapper">
    <div id="player"></div>
  </div>
</section>

Я думаю, что «игрок» должен постоянно меняться. Нужно сделать видео идентификаторы изменяемыми. Я не уверен, как я могу это сделать.