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

Question

[Marizza40]

Добрый день! У меня на сайте не совсем корректно отображается модальное окно. Оно везде отображается 3им видео и крестик не закрывает открытое окно. В js я новичок, поэтому думаю что проблема в нем, но найти не могу что поменять:

Код HTML:

<div class="goods_video">
		<div class="goods_video_card" id="goods_video_card">
 <img width="260" alt="Обзор и настройка преобразователя влажности и температуры ПВТ100." src="/upload/medialibrary/196/1961aed6b0a6b7b3467642f8f4171b26.jpg" height="146" id="myBtn" title="Обзор и настройка преобразователя влажности и температуры ПВТ100.">
			<p class="goods_video_txt">
				 Обзор и настройка преобразователя влажности и температуры ПВТ100. Работа с конфигуратором.
			</p>
			<div id="myModal" class="modal">
				<div class="modal-content">
 <span class="close">×</span>
					<iframe width="560" height="315" src="https://www.youtube.com/embed/JmxV13PNJHc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
				</div>
			</div>
		</div>
		<div class="goods_video_card" id="goods_video_card_1">
 <img width="260" alt="Подключение и настройка датчика влажности ПВТ100" src="/upload/medialibrary/f8a/f8a38de442197ac12c11105ab9f7f4e5.jpg" height="146" id="myBtn" title="Подключение и настройка датчика влажности ПВТ100">
			<p class="goods_video_txt">
				 Подключение и настройка датчика влажности и температуры ПВТ100 к ПР200 по RS-485
			</p>
			<div id="myModal-1" class="modal">
				<div class="modal-content">
 <span class="close">×</span>
					<iframe width="560" height="315" src="https://www.youtube.com/embed/5qEVUdoX7kw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
				</div>
			</div>
		</div>
		<div class="goods_video_card" id="goods_video_card_2">
 <img width="260" alt="Датчики влажности, регистраторы и нормирующие преобразователи" src="/upload/medialibrary/e1c/e1c9bd22c600b63cd617882542a33c06.jpg" height="146" id="myBtn" title="Датчики влажности, регистраторы и нормирующие преобразователи">
			<p class="goods_video_txt">
				 Вебинар «Датчики влажности, регистраторы и нормирующие преобразователи»
			</p>
			<div id="myModal-2" class="modal">
				<div class="modal-content">
 <span class="close">×</span>
					<iframe width="560" height="315" src="https://www.youtube.com/embed/zTHTt5xWjSg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
				</div>
			</div>
		</div>
	</div>

КОД JAVASCRIPT:

var modal = document.getElementById("myModal");
var btn = document.getElementById("goods_video_card");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
var modal = document.getElementById("myModal-1");
var btn = document.getElementById("goods_video_card_1");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
var modal = document.getElementById("myModal-2");
var btn = document.getElementById("goods_video_card_2");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Comments

[Aricus]

Если что-то не работает, первым делом нужно локализовать ошибку. За отладку в js отвечает команда

console.log('Текст, который выведется в консоли браузера ctrl+shift+I - Console');