停止视频哈希更改

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 的页面，这些 div 根据哈希值可见/隐藏，因此我不会重新加载页面，而只是更改同一页面上显示的内容。

Answer 1

最后我找到了一个简单的方法：

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

它强制重新加载页面，并且所有视频都使用占位符重置为原始状态