在浏览器中全屏播放 Youtube 视频答案

【问题标题】：Play Youtube Video Full Screen in Browser在浏览器中全屏播放 Youtube 视频
【发布时间】：2016-06-23 22:05:32
【问题描述】：

我的问题：iOS 是唯一一个默认全屏播放嵌入式 Youtube 视频的操作系统吗？如果是这样，是否可以在非 iOs 设备上全屏（或关闭）安全地显示 youtube 视频？

情况是我有一组网页，每个网页上都包含一个 youtube 视频。这个想法是将用户保留在网页组中（直到他们“退出”组），因此我没有显示任何相关视频，页面上唯一的其他链接是指向其他页面的链接组（以及“退出”按钮）。

问题是我无法提供一致的跨设备体验。据我所知，全屏播放 Youtube 视频的唯一方法是打开 Youtube 应用程序。我不想这样做，因为我不想破坏我的准应用的体验。

我找到了this thread，这似乎很有希望，但链接到 watch_popup url 会触发 Droid 设备上的 Youtube 应用程序。

我可以使用 Youtube API 嵌入视频，然后在用户想要播放视频时以模式显示该视频。但是这样做会扰乱 iOS 设备上的体验，因为默认情况下视频已经全屏播放。

从我的角度来看，我似乎需要检测 userAgent，如果 userAgent 不是 iOS，则在模态窗口中显示视频。检测userAgent好像是2001，那么有没有更好的办法呢？

【问题讨论】：

标签： javascript responsive-design youtube

【解决方案1】：

我们在 IOS 上遇到了类似的情况，只是我们希望它是全屏体验，而我们只希望它是一键式游戏。

默认情况下，如果你在IOS中有内嵌视频，你需要点击视频，然后它会全屏打开，然后你需要再次点击它才能播放。步骤太多。

为了使体验保持一致，我做了以下操作。

为视频使用占位符图像，但通过 youtube api 在不透明度设置为 0 的占位符图像上加载视频。

设置它以使点击事件调整大小、重新定位并将不透明度调整为 1 以实现全屏模式和自动播放。

var done = false;
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
  $('.mobile-video-container').css('opacity', 1);
  $('.page-container').addClass('modal-background');
 }
}

function stopVideo() {
 player.stopVideo();
}
$('.page-container').click(function(){
  $('.mobile-video-container').css('opacity', 0);
  $('.page-container').removeClass('modal-background');
  player.stopVideo();
});

【讨论】：