Javascript '；单击'；指针事件为null的元素上（或替代方法）

我已经在我的站点中嵌入了一个iframe，我想在它的顶部放置一个覆盖层。我的最终目标是在youtube视频上有一个覆盖和文本，在我播放视频时消失，在我暂停视频时重新出现

我希望能够在iframe包装器上切换一个播放视频的类，然后根据父级是否拥有该类显示和隐藏覆盖

我已经将我的覆盖层放置在iframe的顶部，并向覆盖层添加了

指针事件：none

，这样当我将鼠标悬停在覆盖层上时，覆盖层本身将被忽略，我仍然可以单击并播放位于其下方的iframe youtube视频

我的问题是，我需要注册一个函数，该函数在iframe播放并暂停时运行，但我不能注册，因为

带有

指针事件：none

的覆盖阻止我在iframe上注册onclick

我无法在覆盖层上注册onclick，因为我需要能够单击位于覆盖层下方的youtube视频，因此

指针事件：无
是必需的

---

是否有任何方法可以在覆盖层上设置与指针事件等价的内容：无，但仍然能够注册侦听器并单击位于其下方的元素上的事件？

可能不是通过用户是否单击覆盖层来猜测播放状态（这可能会导致错误，如单击音量或全屏按钮），您可以使用实际的官方。它包含许多功能，您可能最感兴趣的功能是。通过附加它，您可以可靠地检查播放机是否正在播放或暂停（或处于任何其他状态，如“缓冲”）.根据API文档和您的要求，我创建了一个具有根据播放状态而变化的覆盖的

PS.由于某些原因，嵌入的stackoverflow代码段在嵌入youtube iFrame时出现问题，原因是

未能在“DOMWindow”上执行“postMessage”

错误，但出于完整性考虑，我仍在发布下面的代码。有关可用的演示，请参阅上面链接的代码笔

var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
videoId:'M7lc1UVf VE'，
活动：{
“onStateChange”：onPlayerStateChange
}
});
}
let overlay=document.querySelector（'.overlay'）；
函数onPlayerStateChange（事件）{
if（event.data==YT.PlayerState.PLAYING）{
overlay.classList.remove（“暂停”）；
叠加。类列表。添加（“播放”）；
}
如果（event.data==YT.PlayerState.PAUSED）{
overlay.classList.add（“暂停”）；
覆盖。类列表。删除（“播放”）；
}
}

.wrapper{
位置：相对位置；
显示：内联块；
}
.覆盖{
位置：绝对位置；
宽度：100%；
身高：100%；
左：0；
排名：0；
指针事件：无；
}
.演奏：以前{
位置：绝对位置；
内容：“；
宽度：100%；
身高：100%；
左：0；
排名：0；
不透明度：0.3；
背景颜色：绿色；
}
.演奏：之后{
内容：“玩”；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
颜色：白色；
文本阴影：#000 0px 0px 1px，#000 0px 0px 1px，#000 0px 0px 1px，
#000 0px 0px 1px，#000 0px 0px 1px，#000 0px 0px 1px；
}
.暂停：之前{
位置：绝对位置；
内容：“；
宽度：100%；
身高：100%；
左：0；
排名：0；
不透明度：0.3；
背景颜色：橙色；
}
.暂停：之后{
内容：“暂停”；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
颜色：白色；
文本阴影：#000 0px 0px 1px，#000 0px 0px 1px，#000 0px 0px 1px，
#000 0px 0px 1px，#000 0px 0px 1px，#000 0px 0px 1px；
}

我曾考虑过这一点，但我的网站目前的工作方式是，用户只需在CMS中粘贴一个iframe，因此我正在尝试找到一种与youtube嵌入iframe一起工作的方法！可以将youtube播放器API附加到现有iframe，请参见答案的更新。太棒了，这对我来说是一个更好的解决方案。谢谢！