必须移除 controls 属性才能完全控制视频控件布局，因原生控件在 Shadow DOM 中不响应 Tailwind 类；应使用 absolute 定位的自定义 HTML 元素配合 z-10 覆盖视频，并注意尺寸、渐变背景与触控适配。
为什么直接加 controls 会导致控件错位或溢出
浏览器原生控件（如 Chrome 的播放条、音量滑块）有固定尺寸和内部布局逻辑，不响应 Tailwind 的 w-full 或 max-w-screen-md 等宽度类。当父容器被缩放（比如在小屏上 max-w-2xl），控件本身不会收缩，而是被裁切、重叠，甚至触发横向滚动条。
video 元素上不能直接用 flex 或 grid 布局控制控件位置
原生控件是 Shadow DOM 内部渲染的，外部 CSS 无法通过 flex、justify-between 等工具类影响其排列。试图给 加 flex flex-col 完全无效——它只作用于 自身这个盒子，不是控件。
- 必须移除
controls属性，才能获得对 UI 的完全控制权 - 所有按钮、进度条、音量滑块都得用普通 HTML 元素（
、）手写 - 这些自定义元素才真正响应
flex、absolute、inset-x-0 bottom-0等定位与布局类
自定义控件层必须用 absolute + inset-0 覆盖视频，但别忘了 z-index
常见错误是把控制栏写在 外面、同级并列，结果它脱离视频区域，在小屏上错位或被其他内容遮挡。正确结构是：
<div class="relative aspect-video bg-black overflow-hidden">
<video class="absolute inset-0 w-full h-full object-contain"><source src="/demo.mp4" type="video/mp4"></source></video><div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-4 z-10">
<div class="flex items-center justify-between">
<button class="text-white hover:text-gray-300">▶</button>
<input type="range" class="w-32 accent-white"><button class="text-white hover:text-gray-300">?</button>
</div>
</div>
</div>
-
z-10是关键：确保控件层压在视频上方，又不挡住全屏按钮等系统级交互 -
bg-gradient-to-t提升可读性，避免控件在浅色画面区域不可见 - 别给
加w-full—— 它会撑满整个控件区，应显式设宽（如w-32或flex-1配合max-w-xs）
移动端点击区域太小？必须加 touch-action-manipulation 和最小尺寸
iOS Safari 对小尺寸可点击区域有拦截策略，尤其当控件高度
- 所有按钮加
min-w-[44px] min-h-[44px]（iOS 最小推荐触控尺寸） - 外层控件容器加
touch-action-manipulation（Tailwind 默认支持） - 避免用
text-2xl单独撑高按钮——字体大小 ≠ 点击热区，必须用 padding 或 min-h - 音量滑块建议用
h-1.5+rounded-full，再包一层p-1扩展热区
最易被忽略的是：自定义控件一旦启用，play、pause、volume 等状态就完全脱离浏览器自动管理，所有逻辑（包括键盘空格键播放、Enter 全屏）都得手动监听 video 元素事件并同步 UI 状态——这不是样式问题，但没做这步，控件就只是“长得像”，不真能用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
