当为移动端适配全屏视频背景时，object-fit: cover 会导致横屏视频在竖屏设备上被强制裁剪放大，丢失画面完整性；改用 object-fit: contain 并配合合理宽高约束，即可实现全尺寸可见、无失真、真正响应式的视频背景。
当为移动端适配全屏视频背景时，`object-fit: cover` 会导致横屏视频在竖屏设备上被强制裁剪放大，丢失画面完整性；改用 `object-fit: contain` 并配合合理宽高约束，即可实现全尺寸可见、无失真、真正响应式的视频背景。
在构建如“Ernani Pro 2024”这类活动落地页时，使用 作为全屏背景能显著提升视觉冲击力。但常见误区是仅设置 width: 100%; height: 100%; 并依赖 object-fit: cover —— 这在桌面端表现良好，却会在手机等窄高比设备上引发严重问题：视频被过度拉伸/裁剪，关键内容（如Logo、文字区域）被挤出可视区。
根本原因在于 object-fit: cover 的行为逻辑：保持宽高比的前提下，缩放视频直至完全覆盖容器，多余部分将被裁切。而手机屏幕（如 9:16）与典型视频（如 16:9）的宽高比差异越大，裁切越剧烈。
✅ 正确解法是组合使用：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /* ✅ 关键：完整显示，留黑边而非裁剪 */
z-index: -1;
}
/* 可选：为黑边区域添加柔和背景色，提升观感 */
body {
background: #0a0a0a; /* 深灰底色，弱化黑边突兀感 */
}
⚠️ 注意事项：
-
object-fit: contain会保留原始宽高比，因此在极端比例下（如超长竖屏）可能出现上下或左右黑边——这是预期行为，远优于内容丢失； - 若需消除黑边同时兼顾完整性，可改用
object-fit: fill，但会牺牲宽高比导致画面变形，不推荐； - 建议为视频添加
preload="metadata"和poster属性，提升首屏加载体验与低网速兼容性； - 移动端务必保留
muted和autoplay（现代浏览器强制要求静音自动播放），并测试 iOS Safari 兼容性（需确保视频编码为 H.264 + AAC）。
最后，别忘了为 .countdown 等前景元素设置足够高的 z-index（如 z-index: 10;）并添加 position: relative;，确保其始终位于视频上方且不被遮挡。通过这一优化，你的倒计时页面将在所有设备上稳定呈现完整画面，兼顾专业性与用户体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
