全屏背景视频裁切或留白的主因是video默认按原始宽高比拉伸，object-fit: cover生效需满足父容器有定位、viewport高度稳定、overflow: hidden等前提；安卓需transform: translateZ(0)触发GPU渲染；iOS需muted+playsinline+webkit-playsinline确保自动播放。
全屏背景视频为什么总是被裁切或留白
因为 video 元素默认按原始宽高比拉伸，而 object-fit: cover 又只作用于替换元素（video 是），但若父容器没设尺寸、没清除默认 margin 或没处理 viewport 高度计算误差，就会出现顶部/底部黑边或横向溢出。关键不是加不加 object-fit，而是它生效的前提是否满足。
- 必须给
video的直接父容器设position: relative或position: absolute，否则position: absolute的定位基准会跳到最近的定位祖先，容易偏移 -
height: 100vh在 iOS Safari 中可能因地址栏收放导致闪动，更稳的是用min-height: 100vh+height: 100%组合 -
object-fit: cover会让视频居中裁切，若想保留完整画面且适配全屏，得改用object-fit: contain，但会伴随上下/左右留白——这不是 bug，是预期行为
如何用 position:absolute 实现真正“贴边”覆盖
很多人把 video 直接设 position: absolute; top: 0; left: 0; width: 100%; height: 100%，结果在部分安卓浏览器里视频只显示左上角一小块。这是因为未设置 transform: translateZ(0) 或 will-change: transform，导致硬件加速未启用，渲染层叠异常。
- 必须包裹一层
<div class="video-container">，并设 <code>position: relative; overflow: hidden -
video自身设position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%) - 加
transform: translateZ(0)到video上，强制触发 GPU 渲染，避免安卓下拉伸错位 - 别忘了加
autoplay muted playsinline属性，否则 iOS 会静音拦截、Android 可能不自动播放 -
cover下，视频实际渲染区域超出容器边界，所以必须配合overflow: hidden才能“干净”裁切 - 如果视频源是竖屏（9:16），而页面是横屏（16:9），
cover会裁掉大量上下内容；此时可考虑用 JS 动态判断宽高比，切换不同源或加 poster 图弥补 -
object-fit: none等同于不设该属性，视频以原始尺寸左上角对齐，通常只用于调试定位 - 必须同时存在
muted和playsinline，缺一不可 - 某些安卓厂商定制系统（如华为 EMUI）要求
webkit-playsinline也得显式声明 - 如果视频加载慢，
canplaythrough事件未触发就执行play()，会抛DOMException: The play() request was interrupted，建议加video.addEventListener('canplaythrough', () => video.play().catch(e => console.warn(e))) - 别依赖
loadstart或loadeddata来调play()，它们太早，缓冲不足
object-fit: cover 和 fill 的实际差异在哪
object-fit: cover 保持宽高比、缩放填满容器、裁切溢出部分；object-fit: fill 直接拉伸至容器尺寸，完全忽略原始比例——后者在背景视频中极少使用，因为会导致人脸/文字严重变形。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
移动端自动播放失败的几个硬性条件
即使写了 autoplay muted，iOS 10+ 和 Android Chrome 53+ 仍可能拒绝播放，根本原因是：用户未与页面产生任何交互（click/touchstart）前，媒体不能有声音（哪怕已 muted），且 playsinline 缺失会导致 iOS 强制全屏播放中断流程。
立即学习“前端免费学习笔记（深入）”；
video 设置 z-index，当页面有其他 fixed 定位元素（如导航栏）时，视频可能被遮挡——但它明明在 DOM 里写在最前面。因为 position: absolute 元素的层叠上下文由其最近的定位祖先决定，不是由 HTML 顺序决定。
