HTML视频弹出层缺少关闭按钮，如何添加以实现关闭功能？

1. 完善弹窗HTML结构 #

首先，给你的视频弹窗容器新增关闭按钮元素，同时确保弹窗结构清晰（假设弹窗容器类名为video-popup）：

<!-- 保留原触发按钮 -->
<p>
  <a class="js__popup" href="#" title="Intro Video"> 
    <i class="s-icon s-icon--lg s-icon--white-bg g-radius--circle ti-control-play"></i>
  </a>
</p>

<!-- 新增视频弹窗容器（需提前添加到页面中） -->
<div class="video-popup" style="display: none;">
  <!-- 关闭按钮 -->
  <button class="video-popup__close js__close-popup">&times;</button>
  <!-- 视频容器，示例用iframe，也可替换为原生video标签 -->
  <iframe src="你的视频播放地址" frameborder="0" allowfullscreen></iframe>
</div>

2. 编写JavaScript交互逻辑 #

给打开按钮、关闭按钮绑定事件，控制弹窗的显示/隐藏，同时关闭弹窗时需暂停视频播放：

// 获取页面元素
const popupTrigger = document.querySelector('.js__popup');
const videoPopup = document.querySelector('.video-popup');
const closeBtn = document.querySelector('.js__close-popup');
const videoPlayer = videoPopup.querySelector('iframe');

// 打开弹窗逻辑
popupTrigger.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止a标签默认跳转行为
  videoPopup.style.display = 'block';
});

// 关闭弹窗通用函数
function closeVideoPopup() {
  videoPopup.style.display = 'none';
  // 暂停视频：iframe通过重置src停止播放，原生video标签直接调用pause()
  if (videoPlayer) {
    const currentSrc = videoPlayer.src;
    videoPlayer.src = currentSrc;
  }
}

// 关闭按钮点击事件
closeBtn.addEventListener('click', closeVideoPopup);

// 可选：点击弹窗背景区域也关闭弹窗
videoPopup.addEventListener('click', function(e) {
  if (e.target === this) {
    closeVideoPopup();
  }
});

3. 添加基础样式（优化关闭按钮显示） #

给关闭按钮和弹窗添加基础样式，让关闭按钮位置合理且显眼：

.video-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.video-popup__close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #ffffff;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

.video-popup__close:hover {
  color: #cccccc;
}

.video-popup iframe {
  width: 80%;
  max-width: 900px;
  height: 500px;
}

关键注意点 #

• 若使用原生<video>标签替代iframe，关闭弹窗时直接调用videoElement.pause()即可，无需重置src。
• 确保弹窗容器初始状态为display: none，仅在触发按钮点击后显示。
• 点击背景关闭弹窗为可选功能，可根据需求保留或删除对应代码。

内容的提问来源于stack exchange，提问作者Avaronesia Inc