使用iframe和JavaScript API，让YouTube视频全屏(Make youtube

我有一个隐藏控件嵌入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 API的Javascript控制它。

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中的任何方法。

它甚至有可能（不控制），如果是-怎么样？

Answer 1:

我已经添加代码做全屏（ 真正的全屏幕，全不窗口 ）我的答案自动全屏的一个YouTube嵌入。

YouTube上没有他们的API中暴露全屏，但你可以在YouTube API调用从playerStateChange（）事件中的原生浏览器requestFullScreen（）函数，或使自己的自定义播放按钮，像我有。

Answer 2:

您可以使用HTML5的全屏API：

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

但需要注意的是：

这通常需要供应商特定的前缀等mozRequestFullScreen()或webkitRequestFullScreen
requestFullScreen对用户事件被称为（喜欢的onclick）
在Firefox中被用户点击到“允许”全屏会变黑

Answer 3:

这在我的情况的工作完美。你可以找到这个链接的更多细节：演示上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)();
  }
}

Answer 4:

看着为API参考iframe球员，我不认为这是可能将其设置为全屏（用iframe单独API） - ctrl f没有找到全屏，所以无论它是隐藏的API或者它内部的秘法不存在。然而，正如你可能知道，你可以设置播放器的大小player.setSize(width:Number, height:Number):Object ，然后进行窗口全屏。

Answer 5:

也许看看这个类似的问题。看起来好像这可能为你工作（使用JavaScript全屏API，而不是的Youtube API）：

使用Javascript在边框的播放器全屏幕选项？

Answer 6:

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

像这样的事情（使用jQuery）：

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

我希望这可以帮助你。

文章来源: Make youtube video fullscreen using iframe and javascript API