本文教你通过动态计算边界范围，将随机移动的按钮（如“skip intro”）严格约束在视频播放器可视区域内，避免按钮逃逸到屏幕边缘，并提供可直接运行的完整代码方案。
要让按钮始终“躲”在视频帧内部（而非全屏任意位置），关键在于：不使用 window.innerWidth/Height 作为随机范围，而应以视频元素的实际尺寸和位置为边界依据。原方案中硬编码 200px 内边距仅适用于全屏 iframe 且忽略页面布局变化，缺乏鲁棒性；更专业、可维护的做法是实时获取视频容器（如 <iframe>）的 DOM 矩形区域，并据此动态计算合法的 left 和 top 取值范围。
以下是优化后的实现逻辑：
✅ 步骤一：精准定位视频区域
使用 iframe.getBoundingClientRect() 获取其相对于视口的精确坐标与尺寸（含 x, y, width, height），确保响应式场景下依然准确：
const video = document.querySelector('iframe');
const button = document.querySelector('.button');
function getVideoBounds() {
const rect = video.getBoundingClientRect();
return {
left: rect.left,
top: rect.top,
right: rect.right,
bottom: rect.bottom,
width: rect.width,
height: rect.height
};
}✅ 步骤二：计算按钮可移动的安全区域
按钮需完全保留在视频内，因此其左上角坐标必须满足：
- left ≥ video.left + button.offsetWidth / 2（预留半宽，配合居中 transform）
- left ≤ video.right - button.offsetWidth / 2
- 同理处理 top
为简化，我们统一采用 transform: translate(-50%, -50%) 实现按钮中心锚点定位（推荐），此时只需确保按钮中心点落在视频区域内即可：
function randomizePosition() {
const bounds = getVideoBounds();
const btn = button.getBoundingClientRect();
const centerXRange = bounds.width - btn.width;
const centerYRange = bounds.height - btn.height;
// 确保有足够空间（防边界错误）
if (centerXRange <= 0 || centerYRange <= 0) return;
const randomX = bounds.left + Math.random() * centerXRange;
const randomY = bounds.top + Math.random() * centerYRange;
button.style.left = `${randomX}px`;
button.style.top = `${randomY}px`;
}✅ 步骤三：CSS 配合居中锚点
.button {
position: fixed;
padding: 20px 32px;
border: 3px solid darkgrey;
background: white;
font-family: Arial, sans-serif;
font-weight: bold;
cursor: pointer;
/* 关键：以自身中心为定位基准 */
transform: translate(-50%, -50%);
/* 可选：提升层级，避免被 iframe 遮挡 */
z-index: 1000;
}⚠️ 注意事项
- 务必在 iframe 加载完成后再执行首次定位，否则 getBoundingClientRect() 可能返回 0。可监听 iframe.onload 或使用 setTimeout 延迟初始化。
- 若页面存在滚动，position: fixed 会脱离文档流，但 getBoundingClientRect() 返回的是视口坐标，天然兼容滚动状态。
- 在移动端需额外考虑触摸事件（touchstart 替代 mouseenter），因 hover 在触屏设备上不可靠。
✅ 完整初始化示例
button.addEventListener('mouseenter', randomizePosition);
// 移动端兼容
button.addEventListener('touchstart', randomizePosition);
// 首次定位（确保 iframe 已渲染）
window.addEventListener('load', () => {
// 等待 iframe 加载完成更稳妥
const iframe = document.querySelector('iframe');
if (iframe.complete) randomizePosition();
else iframe.addEventListener('load', randomizePosition);
});该方案彻底解耦了按钮行为与全局窗口尺寸，真正实现“随视频走”，无论视频是响应式缩放、嵌套在 flex 容器中，还是位于非全屏布局内，均能精准约束——这才是生产环境可用的随机躲避按钮实现。
