多模态框中多个Vimeo视频自动播放异常问题求助

我做了几个带有Vimeo视频的弹窗模态框，每个视频都设置了自动播放。目前模态框的打开和关闭都正常，视频也能自动播放，但遇到一个奇怪的问题：当我点击打开第二个模态框时，第一个视频会在后台继续自动播放，而第二个视频反而不会自动播放了。

我排查了好久都没找到问题所在，以下是我的完整代码，麻烦各位帮忙看看哪里出错了：

HTML 代码 #

<script src="https://player.vimeo.com/api/player.js"></script>

<div class="modal" id="modal1">
    <div class="modal-content">
        <iframe src="https://player.vimeo.com/video/1053959997?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" width="1080" height="1620" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media" title="long - dynamic content"></iframe>
    </div>
</div>

<div class="modal" id="modal2">
    <div class="modal-content">
        <iframe src="https://player.vimeo.com/video/1054046699?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" width="1080" height="1620" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media" title="long - dynamic content"></iframe>
    </div>
</div>

<a href="#modal1" class="modal-button">modal 1</a>
<a href="#modal2" class="modal-button">modal 2</a>

CSS 代码 #

.modal {
    display: none;
    padding-top: 100px;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    margin-bottom: auto;
    padding: 40px;
    border-radius: 8px;
    position: fixed;
    z-index: 9999999;
}
.modal-content {
    background-color: #fff;
    padding: 1rem;
    border: 1px solid #333;
    padding: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.close {
    position: absolute;
    right: 0;
    top: 0;
    transform: rotate(-45deg);
    font-size: 28px;
    font-weight: bold;
}

iframe {
    width: 100%;
    height: 100%;
}

JavaScript 代码 #

// Get the button that opens the modal
var btn = document.querySelectorAll("a.modal-button");

// All page modals
var modals = document.querySelectorAll(".modal");

// Get the <span> element that closes the modal
var spans = document.querySelectorAll(".close");


// When the user clicks the button, open the modal
let iframe = document.querySelector('iframe');
let player = new Vimeo.Player(iframe);

for (var i = 0; i < btn.length; i++) {
  btn[i].onclick = function (e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
    player.play();
  };
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
  spans[i].onclick = function () {
    for (var index in modals) {
      if (typeof modals[index].style !== "undefined")
        modals[index].style.display = "none";
        player.pause();     
    }
  };
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
  if (event.target.classList.contains("modal")) {
    for (var index in modals) {
      if (typeof modals[index].style !== "undefined")
        modals[index].style.display = "none";
        player.pause();
    }
  }
};

备注：内容来源于stack exchange，提问作者Peter Wong