Youtube 嵌入的自动全屏显示答案

【问题标题】：Auto-Full Screen for a Youtube embedYoutube 嵌入的自动全屏显示
【发布时间】：2011-11-28 17:54:06
【问题描述】：

我在网页上嵌入了一个 Youtube 视频。

是否可以在用户按下播放时使用HTML5 iframe with Youtube's API 让视频全屏显示？

无法使用 Chromeless 播放器，因为该网站是为 iPad 设计的。

【问题讨论】：

标签： javascript ipad html youtube embed

【解决方案1】：

据我所知，使用 youtube 嵌入代码或 youtube javascript API 是不可能的。您必须编写自己的播放器才能拥有此功能。

阅读一下，您似乎可以使用 chromeless youtube 播放器，它会自行调整其父元素的宽度和高度。

这意味着如果您使用无铬播放器，您可以在触发play 事件的情况下使用javascript 调整div 的大小。

【讨论】：

【解决方案2】：

不，出于安全考虑，这是不可能的。

最终用户必须做一些事情来启动全屏。

如果您要运行 Adobe AIR 应用程序，您可以自动进行全屏激活，而无需最终用户执行任何操作。但它会是桌面应用程序，而不是网页。

【讨论】：

什么安全问题？欺骗用户以为他们在登录屏幕上并输入密码？据我所知，无法通过 Youtube 视频从用户那里获取数据。有兴趣知道安全问题是什么。

【解决方案3】：

2013 年 11 月更新：这是可能的 - 真正的全屏，而不是全窗口，使用以下技术。正如@chrisg 所说，YouTube JS API 没有“默认全屏”选项。

创建自定义播放按钮
使用 YouTube JS API 播放视频
使用 HTML5 全屏 API 使元素全屏

这是代码。

var $ = document.querySelector.bind(document);

// Once the user clicks a custom fullscreen button
$(playButtonClass).addEventListener('click', function(){
  // Play video and go fullscreen
  player.playVideo();

  var playerElement = $(playerWrapperClass);
  var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(playerElement)();
  }
})

【讨论】：

对不起，函数 showVideoCallback(); ?
@Martialp 只是为了做一个很好的例子而削减生产代码的遗留问题，我现在已经删除了。
我创建了一个demo on CodePen，似乎虽然代码有效（仅在桌面上），但 它在 Chrome 中破坏了 YouTube 自己的全屏行为，所以我不建议使用它。 -- 我还想补充一点，它不能在移动设备上运行，因为 (1) 您无法通过 iOS/Android 上的 YouTube API 播放视频，以及 (2) 即使您通过点击播放视频播放器 requestFullScreen() 需要立即执行用户操作，因此它不会触发“onPlay”。因此，一键播放视频或全屏播放；你总是需要两个单独的水龙头。
这不是真的 bfred.it，在 Android 上你可以调用：webView.getSettings().setMediaPlaybackRequiresUserGesture(false);
@AlexeyStrakh 播放器元素使用的 CSS 类，例如 .player 或类似的。

【解决方案4】：

我想我会发布一个更简单的更新方法来使用 html5 解决这个问题。

.ytfullscreen 是按钮的名称或您想要点击的任何名称。 #yrc-player-frame-0 将是您的 iframe 的名称。

jQuery(".ytfullscreen").click(function () {
    var e = document.getElementById("yrc-player-frame-0");
    if (e.requestFullscreen) {
        e.requestFullscreen();
    } else if (e.webkitRequestFullscreen) {
        e.webkitRequestFullscreen();
    } else if (e.mozRequestFullScreen) {
        e.mozRequestFullScreen();
    } else if (e.msRequestFullscreen) {
        e.msRequestFullscreen();
    }
});

【讨论】：

这与我的答案相同，但添加了 jQuery 依赖项。