javascript - 防止 YouTube 嵌入式播放器全屏显示

标签 javascript iframe video youtube html5-fullscreen

由于 YouTube API 无法以编程方式触发全屏(显然有充分的理由,与旧版 Flash 支持相关,如 here 所述),我只能通过使用 HTML5 Element.requestFullscreen API 来全屏播放器 IFrame。

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

那么,是否有任何一致的方法可以防止嵌入式 YouTube 播放器在任何情况下都进入全屏状态,而不影响其他功能?

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

最佳答案

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

关于javascript - 防止 YouTube 嵌入式播放器全屏显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32240497/

相关文章:

javascript - 如何让动画无限循环运行

HTML5框架替代

flash - MP4 视频略微异步 - 但仅在初始播放时

HTML5 视频最佳实践

Java - 从 URL 的视频中获取片段

javascript - 如何从函数而不是窗口调度事件

javascript - jQuery.animate() 函数上的菜单 "ul"与子菜单 "ul"元素重叠

javascript - Angular : applying filters to a ng-repeat

php - 使用 PHP 将 "wmode"参数添加到 iframe 的 src

iframe - 如何在 Meteor 的特定页面上禁用 HTTPS/SSL?