17370845950

使用容器和CSS实现HTML视频响应式布局，通过设置宽度百分比、height:auto及padding-bottom维持16:9比例，结合媒体查询优化小屏显示，确保视频自适应不同设备。

要让HTML视频实现自适应或响应式布局，关键是确保视频在不同屏幕尺寸下都能保持比例并自动调整大小。下面介绍几种实用方法。

使用CSS设置视频容器包裹

推荐用一个容器包裹标签，并通过CSS控制其宽高表现。

基本思路是让容器宽度占满父元素，视频高度随宽度自动调整，避免变形。

示例代码：

保持视频宽高比（如16:9）

为防止页面抖动或布局错乱，可使用“padding-top”技巧固定容器高宽比。

常见做法：利用相对定位和padding百分比来维持比例。

示例：

添加媒体查询优化小屏体验

虽然上述方法已具备响应性，但可在小屏幕上进一步优化控制条显示或限制最大宽度。

例如：

@media (max-width: 768px) {
  .video-container video {
    max-height: 240px;
  }
}

这样可以防止在手机上视频过大影响阅读。

基本上就这些。核心是用容器控制比例，用百分比宽度实现伸缩，用绝对定位保持画面完整。不复杂但容易忽略细节。