HTML5与CSS响应式视频弹窗不符合设计要求的问题排查

问题现状 #

• 点击触发元素后，视频跳转到新页面打开，先显示小尺寸随即自动全屏，需手动返回才能回到作品集页面
• 返回后鼠标靠近触发图片时，全屏视频会异常悬浮显示

需求目标 #

点击图片/文本按钮，在当前页面弹出响应式浮动视频；点击关闭按钮或页面其他区域，弹窗关闭，页面停留在原作品集页面

修复步骤 #

1. 调整HTML代码（阻止跳转行为） #

原触发链接的href指向视频地址会导致页面跳转，需修改为无效链接并阻止默认行为：

<div class="col-lg-4 col-md-6 items theatrical social">
 <div class="item mt-40">
  <div class="img">
   <img src="assets/imgs/website_new/portfolio_img/aquaman_and_the_lost_kingom_01p.jpg" alt="">
    <div class="cont d-flex align-items-center">

    <div id="light">
      <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
      <video id="Aquamanandthelostkingdom" controls> 
        <source src="https://www.marksantora.com/H264/aquaman2_BloodIsThickerThanWater.mp4">
      </video>
    </div>

    <div id="fade" onClick="lightbox_close();"></div>
                    
        <div>
     <h5 class="fz-22">
      <a href="#" onclick="lightbox_open(); return false;">Aquaman and the Lost Kingdom</a>
     </h5>
     <p>
      <a href="#" onclick="lightbox_open(); return false;">Blood Is Thicker Than Water</a>
      </p>
    </div>                              

        <div class="ml-auto">
         <a href="#" onclick="lightbox_open(); return false;" class="ti-arrow-top-right"></a>
        </div>
       </div>
      </div>
     </div>
    </div>

核心修改：所有触发点击的<a>标签，将href改为#，并在onclick事件后添加return false;，彻底阻止页面跳转。

2. 优化CSS样式（实现响应式居中弹窗） #

调整弹窗定位、尺寸和视频自适应规则：

/* HTML 5 Video playing in a lightbox
-----------------------------------------------------------------*/

#fade {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  opacity: .80;
}

#light {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90vw;
  max-height: 90vh;
  border: 2px solid #FFF;
  background: #FFF;
  z-index: 1002;
  padding: 10px;
}

#light video {
  width: 100%;
  max-height: calc(90vh - 40px);
}

#boxclose {
  cursor: pointer;
  color: #fff;
  border: 1px solid #AEAEAE;
  border-radius: 3px;
  background: #222222;
  font-size: 31px;
  font-weight: bold;
  line-height: 0px;
  padding: 11px 3px;
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 1003;
  opacity: 0.9;
}

.boxclose:before {
  content: "×";
}

核心修改：

• 将#light改为fixed定位，配合transform: translate(-50%, -50%)实现视窗居中
• 设置弹窗和视频的最大宽高为视窗的90%，保证在各类设备上的适配性
• 调整关闭按钮位置，避免被视频遮挡
• 移除无效的hover隐藏关闭按钮样式，解决返回后视频悬浮的异常

3. 补充JavaScript逻辑（控制弹窗和视频状态） #

添加弹窗显示/隐藏函数，并处理视频播放状态：

function lightbox_open() {
  document.getElementById('light').style.display = 'block';
  document.getElementById('fade').style.display = 'block';
}

function lightbox_close() {
  document.getElementById('light').style.display = 'none';
  document.getElementById('fade').style.display = 'none';
  
  // 关闭弹窗时暂停视频并重置播放位置
  const video = document.getElementById('Aquamanandthelostkingdom');
  video.pause();
  video.currentTime = 0;
}

// 支持ESC键关闭弹窗
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    lightbox_close();
  }
});

核心功能：

• 控制弹窗的显示与隐藏
• 关闭弹窗时自动暂停视频并重置到开头，避免后台播放
• 增加ESC键关闭弹窗的快捷操作，提升用户体验

内容的提问来源于stack exchange，提问作者Mark Santora