После того, как я проиграл 2 видео и закрыл iFrame, кнопка «Назад» в браузере будет воспроизводить звук без видео, как это исправить?

Question

На моем сайте [сейчас по адресу: http://gatecybertech.com/test, но позже он будет перемещен на основной сайт: http://gatecybertech.com]. Вы можете нажать в правом верхнем углу ссылку «Видео», чтобы перейти в раздел видео, после того, как я проиграл несколько клипов и закрыл iFrame, если я нажму на кнопку «Назад» в браузере, последнее видео будет воспроизведено снова, но странная вещь: я слышу звук, но не вижу видео ? Итак, как решить проблему, выполнив одно из следующих действий:

[1] Показать видео снова в iFrame и воспроизводить его нормально

или

[2] Не воспроизводить звук и не показывать видео

Любой из вышеперечисленных подойдет. Как мне этого добиться?

Мой HTML выглядит так:

            <div class="tools-icon">
              <a href=https://www.youtube.com/embed/IgBIaZgoAQc?autoplay=1 target=_blank data-target="modal" data-video-title="Keypad Pins Easily Stolen"><img src=https://i.ytimg.com/vi/IgBIaZgoAQc/hqdefault.jpg?sqp=-oaymwEXCPYBEIoBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDW3KcjXsTR5utmlvhFfibLe-bvRg width=170 height=110></a>
              <p class="tools-icon__text">Keypad Pins Easily Stolen</p>
            </div>

...

  <!-- the modal div that will open when an anchor link is clicked to show the related video in an iframe. -->

    <div id="modal" tabindex="-1">
      <div class="content">
        <h4 class="title"></h4>
        <iframe class="yt-video" src="https://www.youtube.com/embed/A1nRiiWYgZw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>

      <div class="black_overlay" onclick="closeLightBox()" style="display: block;">
        <div style=" z-index: 0; left: 76%; top: 17%; width: 22px; position: absolute;">
          <a class="close" onclick = "return close_iFrame();"><h2>&times;</h2></a>
        </div>
      </div>
    </div>

Сценарий выглядит так:

<script>
  var modal = document.getElementById('modal'), 
      closeBtn = modal.querySelector('close'), 
      ytVideo = modal.querySelector('.content .yt-video'), 
      title = modal.querySelector('.content .title'), 
      anchors = document.querySelectorAll('a[data-target="modal"]'), 
      l = anchors.length;

  for (var i = 0; i < l; i++)
  {
    anchors[i].addEventListener("click", function(e)
    {
      e.preventDefault();
      title.textContent = this.dataset.videoTitle || 'No title';
      ytVideo.src = this.href;
      modal.classList.toggle('is-visible');
      modal.focus();
    });
  }

  modal.addEventListener("keydown", function(e)
  {
    if (e.keyCode == 27)
    {
      title.textContent = '';
      ytVideo.src = '';
      this.classList.toggle('is-visible');
    }
  });
</script>

<script language="javascript" type="text/javascript">
  function close_iFrame()
  {
    var modal = document.getElementById('modal'), 
                ytVideo = modal.querySelector('.content .yt-video'); 
                ytVideo.src = '';
                modal.classList.toggle('is-visible');
  }
</script>

Answer 1

ОК, я понял, просто внесите следующее изменение:

<script language="javascript" type="text/javascript">
  function close_iFrame()
  {
    var modal = document.getElementById('modal'), 
                ytVideo = modal.querySelector('.content .yt-video'); 
                ytVideo.src = '';
                modal.classList.toggle('is-visible');
    history.go(-1);
    window.location.href = '#Videos';
  }
</script>