使用 iframe 和 javascript API 制作 youtube 视频全屏答案

【问题标题】：Make youtube video fullscreen using iframe and javascript API使用 iframe 和 javascript API 制作 youtube 视频全屏
【发布时间】：2013-02-13 10:11:56
【问题描述】：

我有一个带有隐藏控件的嵌入式 youtube 视频：

<iframe id="ytplayer" type="text/html" width="400" height="225"
src="http://www.youtube.com/embed/dMH0bHeiRNg?rel=0&controls=0&showinfo=0
&loop=1&hd=1&modestbranding=1&enablejsapi=1&playerapiid=ytplayer"
frameborder="0" allowfullscreen></iframe>

我可以使用 youtube Javascript API 来控制它。

var tag = document.createElement('script');

tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
  events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
  }
});
}

player.playVideo() 之类的东西可以完美运行。现在我正在寻找一种通过 Javascript 调用以全屏模式播放视频的方法，但我在 API 中找不到任何方法。

是否有可能（没有控件）？如果可以 - 怎么做？

【问题讨论】：

AFAIK “真正的”全屏是用 Flash（或那种类似的东西）...
@Adriano Flash 不是必需的，全屏 API 已经存在，并且由除 IE(10) 之外的所有现代浏览器实现：caniuse.com/#feat=fullscreen
@RobW 很好，我不知道。很遗憾，如果 IE（甚至 10）不支持它几乎不可能使用它...:(
@Adriano 这不一定是个问题。在可用时使用 HTML5 API，并在必要时使用后备（如 Flash）。
@RobW 对，我太容易沮丧了:)

标签： javascript youtube youtube-api

【解决方案1】：

这对我来说很完美。您可以在此链接上找到更多详细信息：demo on CodePen

var player, iframe;
var $ = document.querySelector.bind(document);

// init player
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '200',
    width: '300',
    videoId: 'dQw4w9WgXcQ',
    events: {
      'onReady': onPlayerReady
    }
  });
}

// when ready, wait for clicks
function onPlayerReady(event) {
  var player = event.target;
  iframe = $('#player');
  setupListener(); 
}

function setupListener (){
$('button').addEventListener('click', playFullscreen);
}

function playFullscreen (){
  player.playVideo();//won't work on mobile

  var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(iframe)();
  }
}

【讨论】：

我认为.requestFullscreen 和.webkitRequestFullscreen 都有一个小写s。 Moz 是only 三峰骆驼。

【解决方案2】：

我在Auto-Full Screen for a Youtube embed 上的回答中添加了全屏代码（真正的全屏，而不是全窗口）。

YouTube 不会在其 API 中公开全屏，但您可以从 YouTube API 的 playerStateChange() 事件调用本机浏览器 requestFullScreen() 函数，或者像我一样制作自己的自定义播放按钮。

【讨论】：

我正在使用本机浏览器 requestFullScreen() 函数，但是 youtube 上的全屏按钮保持不变，这意味着当您单击时它期望全屏。关于如何将按钮从全尺寸更新为关闭全尺寸的任何想法？

【解决方案3】：

可以使用html5全屏api：

node.requestFullScreen();
document.cancelFullScreen();
document.fullScreen; // bool

但请注意：

这通常需要供应商特定的前缀，例如 mozRequestFullScreen() 或 webkitRequestFullScreen
requestFullScreen 必须在用户事件上调用（例如 onclick）
在 Firefox 中，全屏显示为黑色，直到用户单击“允许”

【讨论】：

PSA：注意requestFullScreen 中的大写S，afaik 它已被弃用（但可能仍在Firefox 中），应该有一个小的s； requestFullscreen。我花了一段时间才弄明白
请更新答案。它已经过时并给我带来了一些问题 - 它现在被称为 exitFullscreen() 并且它返回一个承诺 reference 和 fullscreen 属性已被弃用以支持 fullscreenElement

【解决方案4】：

查看iframe 播放器的 API 参考，我认为无法将其设置为全屏（仅使用 iframe API）-ctrl f 没有找到全屏，所以要么是隐藏在 API 中的秘密方法，或者它不存在。但是，您可能知道，您可以设置播放器的大小player.setSize(width:Number, height:Number):Object，然后制作window fullscreen。

【讨论】：

【解决方案5】：

也许看看这个类似的问题。看起来这可能对您有用（使用 javascript 全屏 api 而不是 Youtube API）：

Full Screen Option in Chromeless player using Javascript?

【讨论】：

【解决方案6】：

您可以尝试通过javascript将iframe尺寸设置为窗口尺寸。

类似这样的东西（使用 jQuery）：

$('ytplayer').attr('width', $(window).width());
$('ytplayer').attr('height', $(window).height());

希望对你有帮助。

【讨论】：

我认为海报意味着真正的全屏，即大于窗口。