Как написать несколько модальных окон с ютуб видео на странице?

Question

Danya Wyse @Wyse

JavaScript

Как написать несколько модальных окон с ютуб видео на странице?

Реализован слайдер с тремя кнопками watch video, на первую все работает так как нужно. Если нажимаю на вторую кнопку (modal2) то воспроизводится видео с modal1 и не отображается
как правильно прописать скрипт чтобы это работало как нужно ?

<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>
</section>




const frame = document.querySelector('.frame'); // Инициализация контейнера
const video = document.querySelector('.video'); // Инициализация блока видео
const src = video.dataset.src; // подгружение ссылки по событию


const openEls = document.querySelectorAll("[data-open]"); //кнопка открытия попапа
const closeEls = document.querySelectorAll("[data-close]"); //кнопка закрытия попапа

const isVisible = "is-visible"; // попап активен

//Создание фрейма по клику
window.addEventListener('DOMContentLoaded', function () {
	let 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");
	});
}

//Закрыть модальное окно

//Клик на кнопку
for (const el of closeEls) {
	el.addEventListener("click", function () {
		stopPopup();
	})
}

//Клик вокруг
document.addEventListener("click", e => {
	if (e.target === document.querySelector(".modal.is-visible")) {
		stopPopup();
	}
});

//Кнопка ESC
document.addEventListener("keyup", e => {
	if (e.key === "Escape" && document.querySelector(".modal.is-visible")) {
		stopPopup();
	}
});