Javascript 如何在网站上覆盖youtube视频

你好，我正在想办法做下面的事情

1.单击页面上的图像

2.这将在当前页面的顶部覆盖youtube视频

3.点击屏幕的任何透明部分，用户将返回到所述页面

我添加了一个屏幕截图来帮助说明我的场景。 提前感谢您的帮助，这是我正在进行的一个辅助项目！！

---

我想在附加图片之前我需要更多的声誉，所以我添加了一个截图

这里有一个非常简单的方法，我认为它可以满足您的需要，而不需要插件。您可以随意调整视频大小和位置，但逻辑不会改变。显示视频时，单击“测试”按钮不会触发默认事件（和警报）-相反，与视频外的整个区域相同。一旦视频被隐藏，测试链接将正常工作。请在运行代码段时使用“全屏”选项

如果要在隐藏div时停止视频播放，则需要作为按钮单击功能的一部分动态加载iframe，然后在隐藏div时将div html设置为

'

$（'#btn'）。单击（函数（）{
$（'video，'overlay'）.fadeIn（'slow'）；
$（'#视频容器'）.html（''）；
});
$（文档）.on（'touchend，mouseup'，函数（e）{
如果（！$（“#视频”）.is（e.target））{
$（'video，'overlay'）。淡出（'slow'）；
$（'#视频容器'）.html（''）；
}
});
$（'#btn2'）。单击（函数（）{
警报（“视频不可见”）；
});
#容器{
宽度：600px；
高度：600px；
边框：2个实心#8888888；
位置：相对位置；
文本对齐：居中；
}
#覆盖层{
位置：固定；
排名：0；
左：0；
z指数：1；
身高：100%；
宽度：100%；
背景：#ffffff；
不透明度：0.6；
显示：无；
}
#录像带{
显示：无；
位置：绝对位置；
最高：15%；
左：10%；
宽度：80%；
z指数：2；
}
#视频容器{
位置：相对位置；
垫底：56.25%；
填充顶部：30px；
身高：0；
溢出：隐藏；
}
#视频容器iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}

点击我




试验
试用：感谢您的完美回复。我有三个小问题。1） 有没有办法让视频自动居中而不是左：30px，因为当我改变视频大小时，它不再居中。2） 我可以使用浏览器自动缩放视频吗。这样，如果你在平板电脑或手机上打开它，它就不会过大。3） 也许这是我的测试心态，但如果你快速启动视频，然后开始滚动覆盖有时会变得愚蠢。如果您想查看我的进度，请访问fitgen.myshopify.com/tohewd。您的建议就在幻灯片下方。请随意观看！有没有办法让移动设备上的触摸更灵敏？我似乎无法让覆盖层在我的ipad上消失。可能“$（文档）.mouseup（函数（e）”可以用一个更通用的方法替换？上面编辑的代码。我这里没有触摸设备可以测试，但它应该可以工作。：）