本文介绍如何通过现代 CSS 的 clip-path 属性实现视频上下区域的精准裁剪，使其在保持全宽布局的同时隐藏顶部和底部内容，解决传统 clip 和 overflow 方案失效的问题。
本文介绍如何通过现代 css 的 `clip-path` 属性实现视频上下区域的精准裁剪，使其在保持全宽布局的同时隐藏顶部和底部内容，解决传统 `clip` 和 `overflow` 方案失效的问题。
要裁剪视频的顶部和底部（即保留中间区域），关键在于放弃已废弃的 clip 属性（仅支持绝对定位且语法严格，rect() 在现代浏览器中已被 clip-path 取代），转而使用更灵活、标准化且广泛支持的 clip-path。
✅ 正确做法：使用 clip-path: polygon()
clip-path 允许你定义任意形状的裁剪区域。对于“上下裁剪”，最常用的是矩形裁剪——只需指定四个顶点坐标，围出中间可见区域：
.d1 video {
width: 100%;
height: auto;
clip-path: polygon(0 33%, 100% 33%, 100% 67%, 0 67%);
margin: -18.6% 0; /* 补偿因裁剪导致的视觉偏移，使内容居中 */
}其中：
- 0 33% → 左上角（距顶部33%处）
- 100% 33% → 右上角（同高度）
- 100% 67% → 右下角（距顶部67%处）
- 0 67% → 左下角
这四点构成一个水平居中、高度约34%原始视频高度的矩形窗口，自然隐藏了顶部约33%和底部约33%的内容。
立即学习“前端免费学习笔记（深入）”；
? HTML 结构建议
务必用 <div> 包裹 <video>，并为容器设置明确样式（如边框便于调试），避免直接对 video 元素设置 position: absolute 或依赖 overflow: hidden——后者对替换元素（如 <video>）效果不可靠：
<div class="d1">
<video controls playsinline>
<source src="https://donald.au/bugs/so-77672744.mp4" type="video/mp4">
</video>
</div>⚠️ 注意事项：
- clip-path 需配合 width: 100% 和 height: auto 使用，确保视频按容器宽度自适应缩放；
- playsinline 属性对移动端自动播放至关重要；
- margin: -18.6% 0 是经验性垂直偏移值，用于视觉居中（因裁剪后内容上移），实际值可微调；
- 若需响应式裁剪比例（如不同屏幕下保持固定宽高比），推荐结合 aspect-ratio + object-fit: cover，再叠加 clip-path 进行二次精修。
? 进阶提示：动态裁剪与兼容性
- clip-path 支持 inset() 语法（如 clip-path: inset(20% 0 20% 0)），语义更直观，但兼容性略低于 polygon()（IE 完全不支持，Edge 17+ 支持）；
- 所有主流浏览器（Chrome/Firefox/Safari/Edge ≥ 17）均支持 clip-path，无需前缀；
- 避免在 video 上直接设 position: absolute 或 transform，可能干扰 clip-path 渲染顺序。
掌握 clip-path，你不仅能裁剪视频，还可实现圆形头像、斜切卡片、动态遮罩等高级视觉效果——它是现代前端视觉控制的核心工具之一。
