在自定义模式关闭时停止播放 YouTube 视频

问题描述

你好，很棒的溢出者。

我设法实现了一个漂亮、简单的模式，当点击缩略图 img 时，它会显示一个 youtube 视频。我的挑战是我似乎无法在模式关闭后停止播放视频。

我在这里尝试了很多想法和脚本，但其中很多都与 Bootstrap 模态相关，我似乎找不到将它们的脚本添加到我的自定义模态的方法。

谁能看到一个可能停止视频播放的简单解决方案？任何帮助将不胜感激。谢谢

到目前为止我使用过：

          $jQuery('.modal-content iframe').attr('src','');

尝试将 scr 替换为空，以便视频无法再播放，但是当我将其添加到代码的这一部分时，这不起作用：

  window.onclick = function(event) {
    if (event.target === modal) {
      modal.style.display = "none";
          $jQuery('.modal-content iframe').attr('src','');
    }
  };

-- 完整的 JS 脚本 --

<script type="text/javascript">
jQuery(".modalBtn").click(function() {
  // Get the ID name for the modal from the data-attribute
  var id = jQuery(this).attr('toggle-modal'); 
  // Use the ID from associated Modal that matches the attriutes name
  var modal = document.getElementById(id);
  // Get Modal close button
  var closeModalBtn = document.getElementsByClassName("close");
  // Open Modal
  modal.style.display = "block";
    // Close Modal when clicking anywhere outside of modal
  window.onclick = function(event) {
    if (event.target === modal) {
      modal.style.display = "none";
          $jQuery('.modal-content iframe').attr('src','');
    }
  };
  // Close Modal Function
  function closeModal() {
    modal.style.display = "none";
        $jQuery('.modal-content iframe').attr('src','');
  }
  for (var i = 0; i <= closeModalBtn.length; i += 1) {
    closeModalBtn[i].onclick = closeModal;
  }
});
</script>

-- 触发它的 HTML --

<div id="MyModal" class="modal">
                        <!-- Modal content -->
                        <div class="modal-content">
                            <span class="close">&times;</span>
                                <iframe src="https://www.youtube.com/embed/hiddenid" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>

解决方法

您必须获得视频元素， “html5-main-video”是youtube视频类名称，因此您可以在关闭之前的模型中使用暂停停止视频

var video = document.getElementsByClassName("html5-main-video")[0]
video.pause()

您可以在 youtube 控制台中尝试此代码，您将看到视频停止

html javascript jquery video video