防止 YouTube 嵌入式播放器全屏显示答案

【问题标题】：Prevent YouTube Embedded Player from Fullscreening防止 YouTube 嵌入式播放器全屏显示
【发布时间】：2015-08-27 04:03:32
【问题描述】：

由于 YouTube API 无法以编程方式触发全屏（显然有充分的理由，与旧版 Flash 支持有关，如 here 所述），我只需使用 HTML5 Element.requestFullscreen API 全屏即可播放器 IFrame。

不幸的是，如果用户在 YouTube 播放器中触发全屏，则播放器本身会进入全屏而不是 IFrame，并且不会产生任何事件来表明它已经这样做了。当应用程序的其余部分不知道什么是全屏和不再是全屏时，这会破坏我的 UI 并导致其他同步问题。部分解决方案是使用无铬播放器，然后渲染我自己的播放器控件，这样用户就无法单击 YouTube 全屏按钮 - 但是，事实证明，双击 YouTube 视频也会使其进入全屏模式，同样无法向应用程序的其余部分发出它已经这样做的信号。

那么，是否有任何一致的方式防止嵌入式 YouTube 播放器在任何情况下全屏播放，而不影响其他功能？

到目前为止，我最好的解决方案是在 iframe 上设置 pointer-events:none。然而，这并不是很完美，因为它也使得不可能消除显示在 YouTube 视频上的广告横幅。一个理想的解决方案是阻止“双击全屏”响应，而不会弄乱其他任何东西。（例如，单击播放就可以了，因为 YouTube 播放器确实会发出播放事件，让我让应用程序的其余部分保持同步。）

【问题讨论】：

标签： javascript iframe video youtube html5-fullscreen

【解决方案1】：

使用 iframe 标签嵌入时，可以使用参数fs = "0" 禁用全屏按钮。见http://codepen.io/anon/pen/zvOqKJ

【讨论】：

嗯。该文档表明与我需要的行为完全相反-隐藏按钮，但没有提及实际阻止全屏功能。虽然它的实际作用是不隐藏按钮，但无论如何都要阻止全屏功能。感谢您指出这一点！

【解决方案2】：

这有点奇怪。当我按照此页面通过 playerVars 传递“fs：0”时，我无法阻止全屏

https://developers.google.com/youtube/player_parameters?playerVersion=HTML5

（即使其他一些播放器变量正在发挥作用）

上帝知道出了什么问题，但我修复了它：

var ourYT = document.getElementById('player');
ourYT.allowFullscreen = false;

【讨论】：

【解决方案3】：

使用这个；

iframe {指针事件：无；}

您可以禁用 youtube 播放器上的点击事件（播放、暂停、全屏）；

【讨论】：