如何使相对定位的html视频响应

Question

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

有什么想法吗？

Answer 1

是的，有可能。例如，使用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描述流体宽度视频。

Answer 2

使用此

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

这将给出宽度：100％，高度：根据宽高比自动显示...

Answer 3

只需使用％或vw，vh作为宽度和高度的单位。

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