video元素click热区小因其为替换元素，仅响应实际渲染像素；应外包容器、absolute定位按钮、设pointer-events:none于video、auto于按钮，并确保requestFullscreen直触调用。
video 元素的 click 事件热区为什么比视觉区域小
默认情况下，<video> 是替换元素（replaced element），它的可点击区域仅限于实际渲染出的画面像素范围，不包含 poster 图像未加载时的空白、controls 区域外的 padding，甚至在某些 Safari 版本中，poster 和首帧之间存在短暂“无内容”间隙，导致 click 事件无法触发。
常见错误现象：按钮图标明明盖在视频右上角，但必须精准点到播放控件边缘才响应；移动端手指稍偏就失焦；iOS 上 poster 加载慢时热区暂时消失。
- 不要依赖
<video>自身的click事件做全屏入口——它不可靠 - 把全屏按钮做成独立
<button>或带role="button"的<div>，脱离 video 渲染逻辑 - 用
pointer-events: none让 video 不拦截点击，把热区完全交给按钮控制 - 确保按钮使用
position: absolute定位，并设足够大的width/height（比如48px）满足 WCAG 最小触控尺寸
如何让全屏按钮覆盖整个视频区域并居中
目标不是“放大按钮”，而是让按钮的可点击区域准确覆盖你希望用户操作的视觉热区（例如视频右上角、或整个视频层）。关键在于脱离 video 的事件边界，用容器级布局接管。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给
<video>外层套一个<div class="video-wrapper">，设position: relative - 按钮用
position: absolute定位，例如右上角：top: 12px; right: 12px;；若要覆盖全图，则设top: 0; left: 0; width: 100%; height: 100%; - 加
pointer-events: none到<video>，再加pointer-events: auto到按钮本身，避免遮挡下层 controls - 按钮内用
<svg>或<span>做图标，确保缩放后仍清晰，别用纯 background-image
requestFullscreen() 必须由按钮 click 直接触发，不能中转
浏览器只认“用户手势同步上下文”，任何中间跳转都会断掉信任链。比如从按钮 click → 触发 setTimeout → 调用 requestFullscreen()，就会静默失败，控制台可能只报 NotAllowedError。
立即学习“前端免费学习笔记（深入）”；
- 绑定必须是原生
addEventListener('click', ...)或内联onclick，不能是 Vue 的@click、React 的onClick封装后未透传原生事件 - 回调函数体内必须直接调用
container.requestFullscreen()，不能包裹在 Promise、async/await 或自定义事件里 - 如果按钮在 Shadow DOM 内，需确保事件能穿透，或把 handler 挂到 light DOM 容器上
- 调用前检查兼容性：
if (container.requestFullscreen)，避免旧 Safari 报错中断脚本
iOS Safari 下热区失效的隐藏原因
不是按钮没写对，而是 iOS Safari 在视频未加载完成或未设置 playsinline 时，会把 <video> 提升到独立合成层（compositing layer），导致其父容器的 position: relative 失效，absolute 定位的按钮“悬空”在错误位置。
- 务必为
<video>添加playsinline属性，哪怕你不需要内联播放 - 加
preload="metadata"加速尺寸探测，减少 poster 和首帧之间的热区空白期 - 避免用
display: none切换视频显隐——改用visibility: hidden+opacity: 0组合，保持布局占位 - 若用 CSS 动画淡入视频，动画开始前先确保按钮已挂载且定位计算完成（可用
getBoundingClientRect()校验）
