当前位置：首页 > news >正文

html用css grid实现自适应四宫格放视频

news 2025/7/4 15:54:47

想同时播放四个本地视频：

四宫格；
自式应，即放缩浏览器时，四宫格也跟着放缩；
尽量填满页面（F11 浏览器全屏时可以填满整个屏幕）。

4grid

在 html 中放视频用 video 标签，参考 [1]；参考 [2,3] 用 css 的 grid 实现自适应九宫格的方法，grid 的介绍见 [3]。

Code

code base 是 [2] 的方案 1。
参考 [3] 用 * {...} 去除 padding、margin；单位 vh 详见 [5]；
默认黑背景（视频没有内容的地方黑边）；
视频默认静音：muted

<!doctype html>
<html>
<head><meta charset="UTF-8"><title>test</title><style>* {/* 去掉四围空白 */padding: 0;margin: 0;/* 黑背景 */background: #000000;}body {/* vw/vh：viewport 宽/高的 1% */height: 100vh;/* width: 100vw; */}.container {/* grid 布局的样式 */display: grid;width: 100%;height: 100%;/* 2x2，各占一半宽/高 */grid-template-columns: repeat(2, 50%);grid-template-rows: repeat(2, 50%);/* 宫格之间的间隔（以前是 grid-row/column-gap） */row-gap: 0;column-gap: 0;}.item {/* 这个只是 debug 用的示例框，看宫格内容的大小 */border: 1px solid red;color: red;text-align: center;}</style>
</head><body>
<div class="container"><video width=100% height=100% controls muted><source src="D:/幺妹儿冯宝宝.mp4" type="video/mp4"></video><div class="item">2</div> <!-- 占位框 --><div class="item">3</div> <!-- 占位框 --><video width=100% height=100% controls muted><source src="D:/王也踏青.mp4" type="video/mp4"></video>
</div>
</body>
</html>