video元素默认不占满容器，需用position:absolute+object-fit组合控制尺寸，并针对iOS Safari旧版本降级处理。
video 元素默认不占满容器，必须手动控制尺寸
HTML5 默认是内联替换元素，有自己的固有宽高（通常是 300×150），不会自动撑满父容器。即使设了 width: 100%; height: 100%，也可能因视频原始比例导致留白或裁剪——这不是 bug，而是浏览器对替换元素的默认行为。
真正起作用的是组合：父容器设 position: relative 或 overflow: hidden， 自身设 position: absolute + top/left/bottom/right: 0，再配合 object-fit 控制内容填充方式。
-
object-fit: cover：等比缩放并裁剪，确保填满，常用于背景视频 -
object-fit: contain：等比缩放并完整显示，四周可能留空 -
object-fit: fill：拉伸填充，会变形，慎用 - 必须给
显式设width: 100%; height: 100%，否则object-fit不生效
父容器没设高度时，video 无法“占满”
常见错误是只给父容器设 width: 100%，但没设 height，此时 height: 100% 在 上计算为 0。绝对定位也无效，因为父容器高度未定义。
解决路径取决于场景：
立即学习“前端免费学习笔记（深入）”；
- 已知宽高比（如 16:9）：用
padding-top技巧，父容器设position: relative，子绝对定位 - 全屏/视口高度：直接用
height: 100vh - Flex 容器：父容器设
display: flex; align-items: center; justify-content: center，再让设flex: 1并加object-fit - Grid 布局：父容器
display: grid，放在唯一格子中，设width: 100%; height: 100%; object-fit: cover
object-fit 在 iOS Safari 低版本中不支持 video
iOS Safari 14.5 之前，object-fit 对 元素完全无效，只对
兼容性检查建议：
- 优先检测
CSS.supports('object-fit', 'cover')，再判断是否是video元素 - 真机测试不能省：iOS 13/14 模拟器或旧设备必测
- 降级 fallback：用
background-size: cover+poster图片模拟视觉效果，同时隐藏原的 controls
absolute 定位下 poster 图片和 controls 错位问题
当 设为 position: absolute 后，内置的 poster 和 controls 仍按原始尺寸渲染，可能被裁剪或偏移。尤其 controls 的按钮位置不会随 object-fit 自动调整。
实操要点：
-
poster图片必须和视频原始分辨率一致，否则缩放后模糊或错位 - 避免依赖原生
controls；改用自定义控件（如基于video.currentTime和video.volume实现） - 若必须用原生 controls，把
包一层，该 wrapper 设定位和尺寸，绝对定位其中，并预留 controls 高度（如底部 40px）- 移动端注意：iOS Safari 的原生 controls 会遮挡自定义 UI，且无法用 CSS 覆盖其 z-index
实际最稳的组合往往是：position: relative父容器 +position: absolute; top: 0; left: 0; width: 100%; height: 100%的+object-fit: cover，再根据 iOS 版本决定是否插入降级逻辑。别指望一个 CSS 属性搞定所有环境。
