Mehrere Vimeo -Videos in mehreren Modalen ⇐ JavaScript

[Guest]

Ich habe mehrere Popup -Modale mit jeweils sein eigenes Video in Autoplay. Der Hintergrund und der zweite automatisch sind nicht automatisch. < /p>
Ich bin mir nicht sicher, was ich falsch mache. Ich habe daran gearbeitet unter: CodePen Beispiel < /p>

Code: Select all

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

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

// Get the  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  (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();
}
}
};< /code>
.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%;
}< /code>





https://player.vimeo.com/video/1053959997?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479





https://player.vimeo.com/video/1054046699?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479



[url=#modal1]modal 1[/url]

[url=#modal2]modal 2[/url]