Question

我有一个隐藏控件的嵌入式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中找不到任何方法。

是否可能（没有控件），如果是 - 如何？

Answer 1

我添加了代码来全屏（真正的全屏，而不是完整的窗口）到Auto-Full Screen for a Youtube embed的答案。

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

Answer 2

您可以使用html5全屏api：

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

但请注意：

这通常需要供应商特定的前缀，例如mozRequestFullScreen()或webkitRequestFullScreen
requestFullScreen
在firefox中，全屏将为黑色，直到用户点击“允许”

Answer 3

这在我的案例中完美无缺。您可以在此链接中找到更多详细信息：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)();
  }
}

Answer 4

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

Answer 5

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

Full Screen Option in Chromeless player using Javascript?

Answer 6

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

像这样（使用jQuery）：

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

我希望这可以帮到你。

使用iframe和javascript API全屏显示youtube视频

6 个答案: