正确做法是用max-width: 100%和height: auto保比例，配合padding-top包裹容器实现宽高比，video设object-fit控制缩放，并添加controls、preload="metadata"、playsinline、muted+autoplay等属性确保跨端正常播放。
直接用 <video> 标签 + 响应式 CSS 就能搞定，不需要 JS 库或 iframe，但必须处理宽高比、缩放行为和移动端自动播放限制。
为什么 width="100%" 会拉伸变形？
纯设 width="100%" 不控制高度时，浏览器按默认 300×150 像素比例渲染，视频内容会被挤压。关键不是“填满容器”，而是“保持原始宽高比”。
- 用
max-width: 100%替代width="100%"（避免超父容器） - 高度必须设为
auto，否则会强制裁剪或拉伸 - 外层加一个带
padding-top的包裹容器，实现响应式宽高比（如 16:9 →padding-top: 56.25%）
<video> 必须包含的属性和值
少了这些，iOS Safari 和 Android Chrome 可能拒绝播放、不显示控件，或静音失败。
-
controls：显式写上，否则无播放/音量按钮 -
preload="metadata"：减少首屏加载流量，又能让时长、尺寸可读 -
playsinline：iOS 必须加，否则全屏打开 -
webkit-playsinline和x5-playsinline：兼容老版微信 WebView 和 X5 内核 -
muted+autoplay：想自动播放就得静音，否则被浏览器拦截（尤其移动端）
响应式 CSS 的最小可靠写法
不用框架、不依赖 JS，仅靠原生 CSS 实现等比缩放：
立即学习“前端免费学习笔记（深入）”；
.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /* 或 cover，按需选：contain 保全内容，cover 填满但可能裁边 */
}注意：object-fit 在 IE 中不支持，如果要兼容 IE11，得用 background-image + poster 图片降级，但视频本身仍需 <video> 标签兜底。
常见报错和 fallback 处理
用户看到黑屏/空白/“无效源”时，大概率是以下原因：
-
404或跨域问题：检查src地址是否可直连，服务器是否返回Access-Control-Allow-Origin: * -
ERR_BLOCKED_BY_RESPONSE：MP4 文件 MIME 类型错误，Nginx/Apache 需配置video/mp4 - 无声音但有画面：没加
muted就用autoplay，浏览器直接禁播音频轨道 - Android 微信内无法播放：确认加了
x5-video-player-type="h5"和x5-video-player-fullscreen="false"
真正容易被忽略的是：不同 CDN 对 MP4 的分片策略（如是否支持 Range 请求）会影响 seek 行为；用 object-fit: cover 时，poster 图片也得按相同比例裁切，否则首帧错位。
