Как остановить видео YouTube при скрытии Div

Question

Раньше я задавал аналогичный вопрос, но решил попробовать еще раз, так как с тех пор я пошел в другом направлении. (Я пробовал использовать API YouTube и ничего не добился)

Я пытаюсь создать веб-сайт, на котором отображаются разные страницы, с помощью функции, которая скрывает / показывает разные divs. На одной из этих страниц есть видео с YouTube, и я пытался найти способ остановить видео, когда соответствующий div скрыт. Прямо сейчас видео просто продолжает воспроизводиться в фоновом режиме (вы можете слышать звук), если вы перейдете на другую страницу / div.

После некоторого исследования inte rnet (т.е. этого веб-сайта) я наконец-то получил работающее решение, которое выглядит следующим образом.

var stopButton = document.getElementById('fecharvideo');

stopButton.onclick = function() {
 var myPlayer = document.getElementById("player"); 
 myPlayer.setAttribute("src", " ");
}; 

К сожалению, как вы, наверное, догадались. Это означает, что после нажатия на элемент с id=fecharvideo, iframe просто исчезает, то есть, если вы вернетесь к этому div, видео больше не будет отображаться, что не идеально.

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

Вот скрипка (Чтобы проверить это, откройте «Episódio 1», запустите видео, откройте «Episód ios» через гамбургер-меню, а затем обратно в «Эпизод 1»): https://jsfiddle.net/Santos1600/qu8ejwsm/20/

Answer 1

Решение:

html

<div id="ep1" class="ep1" style="display: none;">
  <div class="video-background">
    <div class="video-foreground">
      <iframe id="player" src="https://www.youtube.com/embed/videoseries?list=**PLAYLISTID**&modestbranding=1&iv_load_policy=3&rel=0&showinfo=0&loop=1&autoplay=1&autohide=1&enablejsapi=1&playerapiid=ytplayer1" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
    </div>
  </div>
  <div class="container">

        <!--Menu/Episódio 1-->
          <div id="myNav2" class="overlayep">
              <div class="overlay-content">
                <ul>
                  <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','episodios'); toggleVideo(video1,'stopVideo');">EPISÓDIOS</a></li>
                  <ul><li><a href="#">POEMA MEDRICAS</a></li>
                      <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','ep2'); toggleVideo(video1,'stopVideo');">O CÃO</a></li>
                      <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','ep3'); toggleVideo(video1,'stopVideo');">TERAPIA À DISTÂNCIA</a></li>
                      <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','ep4'); toggleVideo(video1,'stopVideo');">MANIA DA PERSEGUIÇÃO</a></li>
                  </ul>
                  <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','sobre'); toggleVideo(video1,'stopVideo');">SOBRE</a></li></ul>
              </div>
            </div>
            <div class="botaomenu" onclick="myFunction(this); toggleNav2();">
              <div class="bar1"></div>
              <div class="bar2"></div>
              <div class="bar3"></div>
  </div>


  <a href="javascript:void(0)" onclick="SwapDivsWithClick('ep1','segunda'); toggleVideo(video1,'stopVideo');"><img src="assets/logohorizontal.png" alt="logo" class="logosmall"></a>
</div>
</div>

js

var video1 = document.getElementById('player')
function toggleVideo(a, state) { 
  var iframe = a.contentWindow;
  iframe.postMessage('{"event":"command","func":"' + state + '","args":""}', '*'); 
}