如何使相对定位 html-video 响应

Question

我想知道是否可以使相对定位的 html5 视频响应。换句话说，以正确的宽高比自动调整视频大小。

有什么想法吗？

Answer 1

只用%或vw,vh作为宽度和高度的单位。

<video width="96%" height="54%" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

Answer 2

使用这个，

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

这将给出 width:100%，高度：根据宽高比自动...

Answer 3

是的，这是可能的。例如 CSS:

#video-id {
    width: 100%;
    height: auto;
}

或者直接在HTML:

<video width="100%" ...

由于视频的宽度根据其父级宽度缩放，auto 高度将自动以正确的宽高比缩放。反之亦然自动缩放宽度到高度。

请注意，对于 HTML 版本，请将高度留空（如果您指定 height="100%"，则将宽度留空）以保持 auto 状态。

在 CSS 中，而不是将 width 或 height 设置为 100%，您可能想要设置 max-width: 100% 等，在较大的屏幕上视频不会超出其原始分辨率。

Original source 描述流体宽度视频。

How to make relative positioned html-video responsive