使用容器和css实现html视频响应式布局，通过设置宽度百分比、height:auto及padding-bottom维持16:9比例，结合媒体查询优化小屏显示，确保视频自适应不同设备。
要让HTML视频实现自适应或响应式布局，关键是确保视频在不同屏幕尺寸下都能保持比例并自动调整大小。下面介绍几种实用方法。
使用CSS设置视频容器包裹
推荐用一个容器包裹标签，并通过CSS控制其宽高表现。
基本思路是让容器宽度占满父元素，视频高度随宽度自动调整，避免变形。
示例代码：
<div class="video-container"> <video controls><source src="example.mp4" type="video/mp4"></source></video> </div>
保持视频宽高比（如16:9）
为防止页面抖动或布局错乱，可使用“padding-top”技巧固定容器高宽比。
常见做法：利用相对定位和padding百分比来维持比例。
示例：
<div class="video-responsive"> <video controls><source src="example.mp4" type="video/mp4"></source></video> </div>
添加媒体查询优化小屏体验
虽然上述方法已具备响应性，但可在小屏幕上进一步优化控制条显示或限制最大宽度。
例如：
@media (max-width: 768px) {
.video-container video {
max-height: 240px;
}
}
这样可以防止在手机上视频过大影响阅读。
基本上就这些。核心是用容器控制比例，用百分比宽度实现伸缩，用绝对定位保持画面完整。不复杂但容易忽略细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
