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

Question

你好，很棒的溢出者。

我设法实现了一个漂亮、简单的模式，当点击缩略图时显示一个 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>

Answer 1

你必须得到视频元素， “html5-main-video”是youtube视频类名，所以你可以在模型关闭之前使用暂停停止视频

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

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