video全屏时CSS失效，因浏览器接管渲染；唯一可靠方案是让父容器全屏，并设object-fit:cover、overflow:hidden等样式控制填充效果。
video 全屏时的样式无法直接用 CSS 控制
浏览器进入全屏后，video 元素会脱离普通文档流，渲染层由浏览器原生全屏视图接管——这意味着你写的 width、height、object-fit、transform 等 CSS 在全屏状态下基本失效。不是写得不对，是根本没机会生效。
真正起作用的是浏览器对全屏视频的默认渲染逻辑：它会按原始宽高比缩放并居中显示，上下/左右留黑边（letterbox/pillarbox），除非你主动干预容器层级或使用特定属性。
- 不要给
video元素本身写全屏专用样式（比如.video-fullscreen { ... }），它不会被应用 - 不要依赖
:fullscreen伪类做样式切换——该伪类只在元素“即将进入”或“刚退出”时短暂触发，且各浏览器支持不一（Safari 基本不响应） - 若想控制全屏画面填充方式，唯一可靠路径是：让父容器全屏，而非
video自身
让父容器全屏才能真正控制画面比例
把 video 包在一个 <div> 里，对这个容器调用 <code>requestFullscreen()，再配合 object-fit: cover 和明确尺寸，才能稳定控制视觉效果。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div id="video-container">
<video autoplay muted loop>
<source src="bg.mp4" type="video/mp4">
</video>
</div>
<button onclick="enterFullscreen()">全屏</button>关键 JS：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
function enterFullscreen() {
const container = document.getElementById('video-container');
if (container.requestFullscreen) {
container.requestFullscreen();
} else if (container.webkitRequestFullscreen) {
container.webkitRequestFullscreen();
}
}对应 CSS（全屏时生效）：
#video-container {
width: 100vw;
height: 100vh;
overflow: hidden;
}
#video-container video {
width: 100%;
height: 100%;
object-fit: cover; /* 关键：裁切填满 */
}- 必须设
overflow: hidden，否则滚动条或溢出内容可能干扰全屏渲染 - 移动端 Safari 要求
<video></video>标签带playsinline属性，否则仍会跳转原生播放器，失去对容器的控制 - Firefox 全屏时可能忽略
object-fit，需额外加min-width: 100%; min-height: 100%强制撑满
退出全屏后样式恢复要手动重置
document.exitFullscreen() 不会自动还原你之前为全屏状态临时加的 class 或内联样式。如果进全屏时动态改了 video 的 style，退出后得自己清理。
监听状态变化最稳妥：
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
// 进入全屏：可添加 class 触发 UI 隐藏、调整布局
document.body.classList.add('is-fullscreen');
} else {
// 退出全屏：移除 class，还原控制栏、尺寸等
document.body.classList.remove('is-fullscreen');
// 如果之前改过 video.style，这里重置
}
});- 别只靠 JS 主动调用结果判断是否在全屏——用户按 ESC、手势滑动、系统返回键都会触发退出，只有
fullscreenchange能捕获全部路径 - 某些安卓 WebView 退出全屏后会残留缩放或错位，建议在退出回调里强制
video.style.transform = 'none'并触发一次video.offsetHeight强制重绘
移动端全屏几乎没有样式控制权
iOS Safari 和多数安卓 WebView 对全屏的控制非常有限：一旦进入全屏，就交由系统播放器接管，CSS 完全失效，连 object-fit 都不认。你能做的只有预防性设置：
-
<video playsinline webkit-playsinline></video>必须同时存在，否则 iOS 直接跳原生界面 - 放弃在移动端“强制填满”的幻想——它要么 letterbox（上下黑边），要么 pillarbox（左右黑边），取决于视频与屏幕宽高比
- 如果业务强依赖全屏视觉一致性，移动端应降级为静态封面图 + 播放按钮，避免用户误触系统全屏后体验割裂
- Android 低版本（如 4.4）WebView 不支持
requestFullscreen，需 fallback 到模拟全屏（position: fixed+z-index提升）
真正的难点不在怎么写样式，而在于接受浏览器对全屏视频的“主权”——你只能引导，不能命令。
