纯CSS全屏视频启动页关闭后视频仍播放，能否仅用HTML/CSS解决？

核心结论 #

仅靠HTML和CSS无法实现停止视频播放。CSS只能控制元素的视觉状态（比如隐藏、位移），但无法操作媒体元素的播放逻辑——哪怕视频容器被移出视口，iframe里的视频仍会在后台继续运行。必须借助JavaScript来控制视频的播放状态。

具体实现方案 #

利用你现有代码中的checkbox状态，监听其变化，当用户点击关闭按钮（checkbox被勾选）时，停止iframe内的视频。针对YouTube嵌入视频，有两种简单的实现方式：

方案1：重置iframe的src（无需额外API）

直接修改iframe的src属性，触发视频重新加载（相当于停止当前播放）：

document.getElementById('hide').addEventListener('change', function() {
  const player = document.getElementById('player');
  if (this.checked) {
    // 重置src，停止视频播放
    player.src = player.src;
  } else {
    // 可选：再次显示启动页时自动播放
    player.src = player.src.replace(/&autoplay=1/, '') + '&autoplay=1';
  }
});

方案2：使用YouTube IFrame API（功能更丰富）

如果需要更精细的控制（比如暂停而非重置、调整音量等），可以引入YouTube官方的IFrame API：

1. 在HTML的<head>或</body>前添加API脚本：

<script src="https://www.youtube.com/iframe_api"></script>

2. 添加JavaScript代码初始化播放器并监听checkbox：

let player;
// API加载完成后初始化播放器
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    events: {
      'onReady': function() {}
    }
  });
}

// 监听关闭按钮的状态变化
document.getElementById('hide').addEventListener('change', function() {
  if (this.checked) {
    player.stopVideo();
  } else {
    player.playVideo();
  }
});

注意事项 #

• 方案1无需额外依赖，适合快速解决问题；方案2提供了更完整的视频控制能力，适合需要扩展功能的场景。
• 确保JavaScript代码放在HTML元素加载完成后执行，比如将代码放在</body>标签之前，或者用DOMContentLoaded事件包裹：

document.addEventListener('DOMContentLoaded', function() {
  // 这里放监听代码
});

内容的提问来源于stack exchange，提问作者James Sales