如何嵌入4个16:9响应式YouTube视频：实现2×2/1×4自适应网格

问题分析 #

原代码存在以下核心问题：

• .vid-cell 固定 width:100%，导致始终保持1列布局，无法切换为2×2网格
• 把 max-width/max-height 加在iframe上，容器仍会过度拉伸，破坏间距和比例
• 直接在.vid-cell上加margin，flex布局下会导致宽度计算偏差，宽屏时间距异常

修复方案 #

使用CSS Grid实现响应式布局，搭配容器尺寸限制和16:9比例容器，确保布局切换、比例和间距都符合需求：

1. 用grid-template-columns配合媒体查询，实现屏幕宽度足够时2列，不足时1列
2. 给视频容器设置max-width和min-width，限制视频最大/最小尺寸
3. 用gap控制网格间距，避免margin引发的布局问题
4. 保持16:9比例容器的核心逻辑，确保视频始终是响应式比例

完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 基础重置，避免默认样式干扰 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .vid-container {
            display: grid;
            /* 默认1列，间距20px */
            grid-template-columns: 1fr;
            gap: 20px;
            padding: 20px;
            max-width: 1200px; /* 可选，限制整体容器最大宽度 */
            margin: 0 auto; /* 居中布局 */
        }

        .vid-cell {
            position: relative;
            padding-bottom: 56.25%; /* 维持16:9比例 */
            width: 100%;
            /* 限制视频容器的最大/最小尺寸 */
            max-width: 560px;
            min-width: 280px;
            margin: 0 auto; /* 单列时容器居中 */
        }

        .vid-cell iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        /* 屏幕宽度足够时切换为2列网格 */
        @media (min-width: 1160px) {
            .vid-container {
                grid-template-columns: repeat(2, 1fr);
                justify-items: center; /* 2列时视频容器居中 */
            }
        }
    </style>
</head>
<body>
    <div class="vid-container">
        <div class="vid-cell"><iframe src="https://www.youtube.com/embed/somevid1"></iframe></div>
        <div class="vid-cell"><iframe src="https://www.youtube.com/embed/somevid2"></iframe></div>
        <div class="vid-cell"><iframe src="https://www.youtube.com/embed/somevid3"></iframe></div>
        <div class="vid-cell"><iframe src="https://www.youtube.com/embed/somevid4"></iframe></div>
    </div>
</body>
</html>

代码说明 #

• box-sizing: border-box 确保所有元素的内边距和边框都包含在宽度计算内，避免布局偏移
• CSS Grid的grid-template-columns通过媒体查询切换：默认1fr（1列），屏幕宽度≥1160px时改为repeat(2,1fr)（2列）
• .vid-cell的padding-bottom:56.25%严格维持16:9比例，同时通过max-width:560px限制视频最大尺寸（对应16:9的315px高度），min-width:280px保证小屏幕下视频不会过窄
• gap:20px控制网格项之间的间距，比margin更稳定，不会引发宽度计算问题
• 单列布局时.vid-cell设置margin:0 auto让视频居中，2列时通过justify-items:center让每列的视频容器居中

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