双栏布局嵌入视频需确保不破布局、不卡顿、不遮挡、不响应失常：须设宽高约束与 aspect-ratio，加 muted 才能 autoplay，移动端必加 playsinline，多视频时用 preload="metadata" 并严格按 MP4/WebM 顺序配置 source。
双栏布局里嵌入视频，关键不是“能不能放”，而是“怎么放不破布局、不卡顿、不遮挡、不响应失常”。直接把 <video></video> 往 <div class="col"> 里一塞，大概率出问题：横纵比错乱、移动端溢出、左右栏高度塌陷、滚动卡顿，甚至 autoplay 静音失败。
<h3>双栏容器必须设宽高约束，不能只靠 flex 或 grid 自动撑开</h3>
<p>很多开发者用 <code>display: flex 或 grid-template-columns: 1fr 1fr 做双栏，但忘了 <video></video> 是替换元素，默认不继承父容器宽高。它会按自身原始尺寸渲染，撑爆左侧栏、拉长右侧内容，尤其在小屏下触发横向滚动。
- 给视频容器（比如
<div class="video-wrapper">）加 <code>width: 100%和aspect-ratio: 16/9（现代浏览器），老版本 fallback 用padding-top: 56.25%+position: relative - 视频元素本身设
width: 100%; height: 100%; object-fit: cover，避免拉伸变形 - 禁用
width/height行内属性——它们会覆盖 CSS，且无法响应式 - 如果双栏用
float（不推荐），必须给视频父容器加overflow: hidden清除浮动影响 - 必须加
muted属性才能让autoplay生效，哪怕你后续用 JS 解除静音 -
controls属性别省略——没有它，用户无法手动点播，等于白放 - 移动端需额外加
playsinline，否则 iOS 会强跳全屏，破坏双栏结构 - 若双栏中视频超过 2 个，关闭所有
autoplay，改用preload="metadata"减少首屏资源压力 - MP4 必须放在第一个
<source></source>，type="video/mp4"一个字母都不能错（不是video/mpeg） - WebM 次之，
type="video/webm"；OGV 基本可删，Firefox 也早不依赖它了 - 每个
<source></source>的src路径必须真实可访问，404 不会报错，但会跳过该源直奔下一个 - 降级文本（如
<p>视频加载失败</p>）要写在之前，且不能包在其他标签里 - poster 图片建议用和视频同宽高比的图，CSS 中统一设
background-size: cover; background-position: center - 避免用
font-size缩放 controls，它不可控；改用媒体查询重设video的max-width和margin - 在移动端加
touch-action: manipulation提升控件触摸响应速度 - 真要适配极小屏（如 iPhone SE），考虑用 JS 监听
resize，动态移除一个视频或切换为 thumbnail 列表
autoplay + controls 组合在双栏里极易触发静音拦截
双栏页面常用于首页引导或产品展示，容易误配 autoplay。但 Chrome/Safari 会在无用户交互时静默禁用带声 autoplay，控制台可能不报错，play() 调用直接 throw NotAllowedError，视频黑屏不动。
多视频并排时， 顺序和 type 属性错一个就全挂
双栏常用来对比展示两个视频（如教学 vs 实操），这时每个 <video></video> 都得独立配 <source></source>。常见错误是复制粘贴后漏改 type，或把 MP4 放在 WebM 后面，导致 Safari 用户看到黑屏+提示文本。
立即学习“前端免费学习笔记（深入）”；
双栏响应式断点下，视频 poster 和 controls 会错位
桌面端双栏切到手机单栏时，<video></video> 宽度从 50% 变成 100%，但 poster 图片若没设 background-size: cover 或 object-fit，会出现裁剪异常；controls 控件也可能因缩放变小、点击热区失效。
双栏视频最易被忽略的其实是加载时机——浏览器对同一域名下的并发视频请求有限制，两个高清 MP4 同时 preload，第二个大概率被阻塞几秒。别迷信“布局好看就行”，先压格式（WebM 优先）、再控加载（IntersectionObserver 懒加载）、最后调体验（poster + muted + playsinline），三者缺一不可。
