如何裁剪视频上下部分并隐藏溢出？新手CSS无效求助

你的疑问解答 #

不需要必须给video加id，也可以给包裹它的div加class，两种方式都能实现样式控制，更推荐给容器加class，这样能避免样式影响页面里的其他视频元素，也方便后续复用样式。

你的CSS无效的原因 #

1. clip 属性已被现代浏览器废弃，设置后不会生效；
2. 你写的 clip: rect(300px,0px,300px 0px); 存在语法错误，rect参数需要用逗号分隔四个值（top, right, bottom, left）；
3. 直接给video设置position: absolute搭配overflow: hidden无法实现裁剪效果，需要借助父容器来控制溢出范围。

正确实现方法 #

用容器包裹video，通过容器隐藏溢出部分，让视频宽度铺满屏幕，高度超出容器从而实现上下裁剪：

HTML代码

<div class="video-container">
  <video controls>
    <source src="https://donald.au/bugs/so-77672744.mp4" type="video/mp4">
  </video>
</div>

CSS代码

/* 容器：控制显示区域，隐藏超出部分 */
.video-container {
  width: 100vw; /* 全屏宽度 */
  height: 600px; /* 自定义显示高度，数值越小上下裁剪越多 */
  overflow: hidden; /* 隐藏超出容器的视频内容 */
}

/* 视频：铺满容器宽度，高度自动缩放以超出容器 */
.video-container video {
  width: 100%;
  height: auto;
  /* 若想让视频始终按比例铺满容器（自动裁剪溢出部分），可替换为下面的属性 */
  /* object-fit: cover; */
}

额外说明 #

• 使用object-fit: cover时，视频会保持自身宽高比自动缩放，铺满容器后裁剪超出部分（裁剪方向取决于视频与容器的比例差异）；
• 调整容器的height值可以灵活控制裁剪程度，按需修改即可。

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