HTML5 视频 - 添加定位良好的按钮（图像）作为叠加层

Question

我只是添加了一个视频：

<video preload muted autoplay loop id="sty">
       <source src="content/1/sty.mp4" type="video/mp4">
</video>

我希望这个视频是全角的，因此我将 css 属性的权重设置为 100%，高度设置为 100%：

* {
    overflow: hidden;
}

video {
    height: 100%;
    width: 100%;
}

溢出，因此现在允许滚动。我只是想显示视频（不允许滚动，因此我使用了溢出隐藏）。现在我想添加一些按钮（这些是 [svg] 图像）作为视频的叠加层（喜欢视频，分享视频并获取有关视频的更多信息）。按钮应该像 TikTok 的按钮一样位于视频的左下角：

但到目前为止，我无法让它既不能作为覆盖也不能作为响应。

任何人都有一个有效的 sn-p，其中三个按钮放置在左侧的视频（如屏幕截图中）上？

最好的问候

Answer 1

您可以使用object-fit 属性来适应视频而不会溢出：

video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}