动态视频网格CSS异常：仅显示单个超大视频，全屏功能故障排查

一、视频网格布局异常原因及修复 #

你提到移除JS后布局问题仍存在，说明和JS无关，核心原因是视频原生尺寸或CSS适配逻辑缺失，导致第一个视频撑大网格单元格：

• 视频的极端宽高比（如超宽/超高）仅靠width:100%+height:auto会让单元格跟着视频尺寸撑开
• 网格单元格无高度约束，第一个视频的高度会影响整行网格高度

修复步骤：

1. 给网格视频添加object-fit属性，强制视频适配单元格尺寸，避免撑破布局：

   .video-grid video {
     width: 100%;
     height: 200px; /* 固定单元格高度，可按需调整 */
     object-fit: cover; /* 保持比例填充容器，超出部分裁剪；用contain则完整显示视频，留空白 */
     border-radius: 8px;
   }
   

2. 确保网格父元素宽度不受限：

   .container, #videos {
     width: 100%;
   }
   

二、全屏功能的问题修复 #

你的全屏功能存在两个核心问题：

• closeFullscreen函数逻辑错误：它在查找固定ID的元素，但你创建的全屏弹窗和视频未设置对应ID，导致无法正确关闭
• 全屏按钮前缀代码冗余，现代浏览器已支持标准requestFullscreen方法

修复步骤：

1. 修改closeFullscreen函数，直接传入要移除的弹窗元素：

   function closeFullscreen(overlay) {
     if (overlay && overlay.parentNode) {
       document.body.removeChild(overlay);
     }
     document.body.style.overflow = 'auto';
   }
   

2. 简化全屏按钮逻辑：

   fullScreenButton.onclick = function() {
     try {
       fullscreenVideo.requestFullscreen();
     } catch (err) {
       console.error('全屏请求失败:', err);
     }
   };
   

3. 给弹窗按钮添加样式，避免和视频重叠：

   .close-button, .fullScreenButton {
     position: absolute;
     top: 20px;
     padding: 10px 20px;
     border: none;
     border-radius: 4px;
     background: #fff;
     cursor: pointer;
     font-size: 14px;
   }
   .close-button { left: 20px; }
   .fullScreenButton { right: 20px; }
   

三、完整修复后的代码 #

HTML（无需修改） #

<div class="container">
  <div id="videos" class="content">
    <div class="video-grid">
      <video src="./Videos/video1.mp4" alt="Video 1" onclick="openFullscreenVideo(this)" controls></video>
      <video src="./Videos/video2.mp4" alt="Video 2" onclick="openFullscreenVideo(this)" controls></video>
      <video src="./Videos/video3.mp4" alt="Video 3" onclick="openFullscreenVideo(this)" controls></video>
    </div>
  </div>
</div>

CSS #

/* 基础容器样式 */
.container, #videos {
  width: 100%;
}

/* 视频网格样式 */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 10px;
  padding: 10px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
}

.video-grid video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

/* 全屏弹窗样式 */
.fullscreen-overlay {
  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;
}

.fullscreen-overlay video {
  max-width: 90%;
  max-height: 90%;
}

/* 弹窗按钮样式 */
.close-button, .fullScreenButton {
  position: absolute;
  top: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}

.close-button { left: 20px; }
.fullScreenButton { right: 20px; }

JavaScript #

function openFullscreenVideo(video) {
  const overlay = document.createElement('div');
  overlay.className = 'fullscreen-overlay';

  const closeButton = document.createElement('button');
  closeButton.className = 'close-button';
  closeButton.innerHTML = '关闭';
  closeButton.onclick = function() {
    closeFullscreen(overlay);
  };

  const fullscreenVideo = document.createElement('video');
  fullscreenVideo.src = video.src;
  fullscreenVideo.controls = true;
  fullscreenVideo.autoplay = true;
  fullscreenVideo.muted = true;

  const fullScreenButton = document.createElement('button');
  fullScreenButton.className = 'fullScreenButton';
  fullScreenButton.innerHTML = '全屏';
  fullScreenButton.onclick = function() {
    try {
      fullscreenVideo.requestFullscreen();
    } catch (err) {
      console.error('全屏请求失败:', err);
    }
  };

  fullscreenVideo.onended = function() {
    closeFullscreen(overlay);
  };

  overlay.appendChild(closeButton);
  overlay.appendChild(fullscreenVideo);
  overlay.appendChild(fullScreenButton);
  document.body.appendChild(overlay);
  document.body.style.overflow = 'hidden'; // 弹窗打开时隐藏滚动条
}

function closeFullscreen(overlay) {
  if (overlay && overlay.parentNode) {
    document.body.removeChild(overlay);
  }
  document.body.style.overflow = 'auto';
}

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