如何裁剪具有隐藏溢出的视频的顶部和底部？

Question

我是一个该死的初学者，想要嵌入一个全宽但顶部和底部被裁剪的视频（[https://www.pexels.com/video/bartender-making-a-cocktail-3772392/]）。 这是我放入 CSS 中的：

video {
position: absolute;
display: block;
clip: rect(300px,0px,300px 0px);
overflow: hidden;
}

但这不起作用。视频根本没有改变。我需要在html中的div中创建一个类或在视频中创建一个id吗？

Answer 1

使用

clip-path

。

video {
  width: 100%;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

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