Как привязать массив с ссылками на определенные кнопки?

Есть слайдер с 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>
  • Вопрос задан
  • 42 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы