HTML 当模态框关闭时停止播放iframe中的视频

在本文中，我们将介绍如何在HTML中停止嵌入视频的iframe在模态框关闭时播放。通常，在网页中嵌入视频时，我们使用iframe标签来加载视频内容。然而，当用户关闭模态框时，视频仍然会继续播放。为了提供更好的用户体验，我们需要确保在关闭模态框时停止视频的播放。

阅读更多：HTML 教程

使用JavaScript停止视频播放

要实现这个功能，我们可以使用JavaScript来停止iframe中的视频播放。为了方便起见，我们给iframe添加一个id，以便在JavaScript中获取该元素。

下面是示例代码，显示了如何通过JavaScript停止iframe中的视频播放：

<!DOCTYPE html>
<html>
<body>
  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close">×</span>
      <iframe id="myFrame" src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
    </div>
  </div>

  <script>
    var modal = document.getElementById("myModal");
    var iframe = document.getElementById("myFrame");
    var span = document.getElementsByClassName("close")[0];

    // 当用户点击模态框上的“关闭”按钮时，停止视频播放
    span.onclick = function() {
        modal.style.display = "none";
        iframe.src = iframe.src; // 通过重新加载iframe的src来停止视频播放
    }
  </script>
</body>
</html>

以上代码创建了一个简单的模态框，其中包含一个用于嵌入视频的iframe。当用户点击模态框上的关闭按钮时，通过重新加载iframe的src属性，来停止视频的播放。

使用jQuery停止视频播放

如果你使用jQuery库，也可以使用类似的方法来停止视频播放。下面是示例代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close">×</span>
      <iframe id="myFrame" src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
    </div>
  </div>

  <script>
    (document).ready(function() {
      varmodal = ("#myModal");
      variframe = ("#myFrame");
      varspan = (".close");

      // 当用户点击模态框上的“关闭”按钮时，停止视频播放span.click(function() {
        modal.css("display", "none");iframe.attr("src", $iframe.attr("src")); // 通过重新设置iframe的src来停止视频播放
      });
    });
  </script>
</body>
</html>