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

Question

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

有什么想法吗？

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描述流体宽度视频。