如何让YouTube嵌入iframe适配页面鼠标坐标，实现鼠标跟随？

问题根源：YouTube嵌入的iframe属于跨域独立浏览上下文，主页面的body/document无法直接捕获iframe内部的鼠标移动事件；单纯设置pointer-events:none无效，是因为跨域限制会阻止主页面获取iframe内的鼠标事件，且如果监听目标是body而非document，也可能存在事件捕获范围的问题。

以下是三种可行方案：

方案1：通过透明遮罩层捕获鼠标事件（推荐，兼容交互场景） #

创建一个覆盖iframe的透明遮罩层，让鼠标事件被遮罩层捕获，同时保留iframe的交互能力：

1. HTML结构

<!-- 遮罩层放在iframe同级，位置在iframe上方 -->
<div class="iframe-mask"></div>
<iframe src="https://www.youtube.com/embed/your-video-id" frameborder="0"></iframe>
<!-- 跟随元素层级要高于遮罩层 -->
<div class="mouse-trailer"></div>

2. CSS样式

.iframe-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: auto; /* 捕获鼠标事件 */
  z-index: 99; /* 层级高于iframe，低于跟随元素 */
}

iframe {
  position: relative;
  z-index: 98;
}

.mouse-trailer {
  position: fixed;
  /* 你的跟随元素样式 */
  z-index: 100; /* 确保在遮罩层上方 */
}

3. JavaScript处理交互
   让用户点击遮罩层时，暂时允许事件穿透到iframe，保证能正常播放/暂停视频：

const mask = document.querySelector('.iframe-mask');
const iframe = document.querySelector('iframe[src*="youtube.com"]');

mask.addEventListener('click', () => {
  // 临时关闭遮罩层的事件捕获，让点击穿透到iframe
  mask.style.pointerEvents = 'none';
  // 模拟点击iframe触发播放（可选）
  iframe.click();
  // 300ms后恢复遮罩层，继续捕获鼠标移动事件
  setTimeout(() => {
    mask.style.pointerEvents = 'auto';
  }, 300);
});

// 主页面鼠标移动监听（绑定到document确保全局捕获）
document.addEventListener('mousemove', (e) => {
  const trailer = document.querySelector('.mouse-trailer');
  trailer.style.left = `${e.clientX}px`;
  trailer.style.top = `${e.clientY}px`;
});

方案2：监听iframe的鼠标事件（仅适合同域场景） #

如果iframe是同域的（非YouTube这类第三方跨域iframe），可以直接给iframe绑定mousemove事件，计算绝对坐标后更新跟随元素：

const iframe = document.querySelector('iframe');
const trailer = document.querySelector('.mouse-trailer');

// 监听iframe内部的鼠标移动
iframe.contentWindow.addEventListener('mousemove', (e) => {
  const rect = iframe.getBoundingClientRect();
  // 转换为主页面的绝对坐标
  const globalX = e.clientX + rect.left;
  const globalY = e.clientY + rect.top;
  trailer.style.left = `${globalX}px`;
  trailer.style.top = `${globalY}px`;
});

// 保留主页面的鼠标监听
document.addEventListener('mousemove', (e) => {
  trailer.style.left = `${e.clientX}px`;
  trailer.style.top = `${e.clientY}px`;
});

注意：YouTube的跨域iframe无法使用此方案，浏览器会阻止跨域的事件监听。

方案3：禁用iframe交互（无交互需求场景） #

如果不需要用户和iframe交互，直接设置pointer-events:none并将鼠标事件监听绑定到document：

iframe {
  pointer-events: none; /* 让鼠标事件穿透iframe */
}

// 绑定到document而非body，确保捕获全局鼠标事件
document.addEventListener('mousemove', (e) => {
  const trailer = document.querySelector('.mouse-trailer');
  trailer.style.left = `${e.clientX}px`;
  trailer.style.top = `${e.clientY}px`;
});

内容的提问来源于stack exchange，提问作者Ktashi