关键在于控制尺寸、脱离文档流方式和响应行为：video需设CSS宽高或aspect-ratio，配合muted autoplay playsinline；双栏用flex布局，左侧加flex-shrink:0，右侧禁用width:100%；小屏用flex-direction:column切换。
双栏布局里嵌入视频，关键不是“能不能放”，而是“放进去后别把右侧挤掉、别让左侧内容错位、别在小屏上堆成一团”。直接用 <video></video> 套进 Flex 容器就行，但必须控制尺寸、脱离文档流的方式和响应行为。
video 元素必须显式设宽高或用 CSS 限制尺寸
默认 <video></video> 是块级元素，且不设宽高时会按原始分辨率撑开容器。在 Flex 双栏中，这极易导致右侧视频区域溢出、换行，或把左侧内容顶下去。
- 不要只依赖
width和heightHTML 属性——它们是固定像素值，响应式场景下会失效 - 推荐用 CSS 控制：给
.video-wrapper设flex: 0 0 400px（固定宽度）或flex: 1（弹性占满剩余空间），再给内部.video-container设max-width: 100%和aspect-ratio: 16/9 - 如果用
aspect-ratio，记得加height: auto防止 Firefox 渲染异常
autoplay 必须配合 muted，否则多数浏览器静音拦截
双栏中常需自动播放背景视频，但 Chrome/Firefox/Safari 默认禁止有声 autoplay，即使写 autoplay 也会静音或完全不播。
- 必须同时加
muted和autoplay属性：<video autoplay muted loop playsinline></video> -
playsinline是 iOS/iPadOS 必选项，否则视频会全屏弹出 - 如果后续要用户点击后取消静音，得用 JS 调用
video.muted = false，且必须在用户手势回调中执行（比如button.addEventListener('click', () => { video.muted = false; })）
src 路径错误或 MIME 类型缺失会导致空白但无报错
双栏结构本身不干预资源加载，但视频不显示时，90% 是路径或服务配置问题，而非布局问题。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 本地开发务必用 HTTP 服务起页（如
python3 -m http.server），双击打开file://协议下<source></source>的src会被浏览器拒绝加载 - Nginx/Apache 若未配置
.mp4的 MIME 类型（video/mp4），返回状态码可能是 200 但实际响应体为空，控制台只显示Media resource failed to load - 检查路径是否为相对路径（如
./videos/intro.mp4），绝对路径（C:\xxx\或/videos/未配 base）大概率失败
移动端横向滚动视频列表需禁用 flex-wrap 并设 overflow-x
若双栏中的“视频区”不是单个视频，而是横向排列的多个 <video></video>（如预览缩略图列表），默认会竖向堆叠，必须主动干预流式行为。
- 容器设
display: flex+flex-wrap: nowrap+overflow-x: auto - 每个
<video></video>外包一层<div>，并设 <code>flex: 0 0 320px（或具体宽度）防止被压缩 - 加
-webkit-overflow-scrolling: touch提升 iOS 滚动流畅度 - 避免对
<video></video>直接设width: 100%—— 它会随容器缩放失真，应统一用固定宽高比 +object-fit: cover
最易被忽略的是：双栏中视频区域的 z-index 和 transform 组合。一旦给视频容器加了 transform: translateZ(0) 或其他 3D 变换，它会创建新层叠上下文，可能遮挡左侧导航菜单的下拉项——这不是视频本身的问题，而是层叠顺序被意外改写了。
