如何在隐藏 Div 时停止 YouTube 视频答案

【问题标题】：How to stop YouTube video when hidding a Div如何在隐藏 Div 时停止 YouTube 视频
【发布时间】：2020-09-14 14:30:21
【问题描述】：

我过去曾提出过类似的问题，但我决定再试一次，因为从那以后我走上了不同的方向。（我正在尝试使用 YouTube API，但没有得到任何结果）

我正在尝试建立一个网站，通过使用隐藏/显示不同divs 的功能来显示不同的页面。其中一个页面有来自 YouTube 的视频，我试图找出一种方法来在隐藏相应的 div 时停止视频。现在，如果您切换到另一个页面/div，视频只是在后台继续播放（您可以听到声音）。

在互联网（即这个网站）上进行了一番调查后，我终于找到了一个可行的解决方案，如下所示。

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

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

不幸的是，您可能已经猜到了。这意味着在单击带有id=fecharvideo 的元素后，iframe 就会消失，这意味着如果您返回到该div，视频将不再出现，这并不理想。

是否有任何类似的解决方案可以让我重置视频，而不是完全删除它？

这是小提琴（为了测试它打开“Episódio 1”，开始视频，通过汉堡菜单打开“Episódios”，然后返回“Episódio 1”）：https://jsfiddle.net/Santos1600/qu8ejwsm/20/

【问题讨论】：

标签： javascript html video iframe youtube

【解决方案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>

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

【讨论】：