остановить видео при смене хэша

Question

Я добавил несколько видео на YouTube с этим кодом:

const youtube = document.querySelectorAll('.youtube');

  for (let i = 0; i < youtube.length; i++) {
    const source = `https://img.youtube.com/vi/${youtube[i].dataset.embed}/hqdefault.jpg`;
    const image = new Image();
    image.src = source;
    image.addEventListener('load', function() {
      youtube[i].appendChild(image);
    }(i)); // end eventListener

youtube[i].addEventListener('click', function() {
  const iframe = document.createElement('iframe');

  iframe.setAttribute('frameborder', '0');
  iframe.setAttribute('allowfullscreen', '');
  iframe.setAttribute('src', `https://www.youtube.com/embed/${this.dataset.embed}?rel=0&showinfo=0&autoplay=1`);
    this.innerHTML = '';
    this.appendChild(iframe);
 });
}

Я загружаю изображение в качестве заполнителя, а затем, когда вы нажимаете на изображение, которое запрашиваете видео, как я могу остановить видео, когда window.onhashchange? Это одна страница с несколькими элементами div, которые видны / скрыты в зависимости от хэша, поэтому я не перезагружаю страницу, а просто меняю то, что показываю на той же странице.

вот сайт:

https://costanzolaini.com/proyectos.html#LolaDixieland

Answer 1

В конце концов я нашел простой способ сделать это:

window.addEventListener('hashchange', function() {
  window.location.reload();
});

заставляет перезагрузить страницу и все видео сбрасываются в исходное состояние с заполнителем