Есть слайдер с 3 кнопками
https://iwyse.github.io/Zainoo/, по сути 3 разные видео должны быть. Но воспроизводится только первое. из за того что data.src считывает только первое найденное.
Как вписать правильно логику?
const frame = document.querySelector('.frame'); // Инициализация контейнера
const video = document.querySelector('.video'); // Инициализация блока видео
const src = video.dataset.src; // подгружение ссылки по событию
const modalArr = [
{
"src": "https://www.youtube.com/embed/aqgyhk2TGfs?autoplay=1",
"id": 0,
},
{
"src": "https://www.youtube.com/embed/2vNqaeIKapg?autoplay=1",
"id": 1,
},
{
"src": "https://www.youtube.com/embed/E6kLaaQFctU?autoplay=1",
"id": 2,
}
];
const openEls = document.querySelectorAll("[data-open]"); //кнопка открытия попапа
const closeEls = document.querySelectorAll("[data-close]"); //кнопка закрытия попапа
const isVisible = "is-visible"; // попап активен
//Создание фрейма по клику
window.addEventListener('DOMContentLoaded', function () {
const clickToFrame = document.querySelectorAll('.button__watch').forEach(function (clickToFrame) {
clickToFrame.addEventListener("click", function (e) {
video.classList.add('active');
frame.classList.add('frame-active');
video.innerHTML = '<iframe src=' + src + ' frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
});
});
})
//Функционал отключения блокировки скролла, отмена воспроизведения iframe
function stopPopup() {
document.querySelector(".modal.is-visible").classList.remove(isVisible);
document.documentElement.classList.remove("lock");
video.innerHTML = null;
frame.classList.remove('frame-active');
}
//Показать модальное окно
for (const el of openEls) {
el.addEventListener("click", function () {
const modalId = this.dataset.open;
document.getElementById(modalId).classList.add(isVisible);
document.documentElement.classList.add("lock");
});
}
Сам popup
<section class="frame">
<div class="modal" id="modal1" data-animation="slideInOutLeft">
<div class="modal-dialog">
<button class="close-modal _icon-close" aria-label="close modal" data-close></button>
<section class="modal-container">
<div class="video" id="modal1" data-src="https://www.youtube.com/embed/aqgyhk2TGfs?autoplay=1">
</div>
</section>
</div>
</div>
<div class="modal" id="modal2" data-animation="slideInOutLeft">
<div class="modal-dialog">
<button class="close-modal _icon-close" aria-label="close modal" data-close></button>
<section class="modal-container">
<div class="video" id="modal2" data-src="https://www.youtube.com/embed/2vNqaeIKapg?autoplay=1">
</div>
</section>
</div>
</div>
<div class="modal" id="modal3" data-animation="slideInOutLeft">
<div class="modal-dialog">
<button class="close-modal _icon-close" aria-label="close modal" data-close></button>
<section class="modal-container">
<div class="video" id="modal3" data-src="https://www.youtube.com/embed/E6kLaaQFctU">
</div>
</section>
</div>
</div>
</section>