嵌入Youtube的自动全屏

Question

我在网页上嵌入了Youtube视频.

使用带有Youtube API的HTML5 iframe,是否可以在用户按下播放时全屏显示视频？

由于该网站适用于iPad,因此无法使用Chromeless播放器.

Answer 1

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)();
  }
})

Answer 2

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

进行一些阅读后，您似乎可以使用chromeless youtube 播放器，它会根据其父元素的宽度和高度调整自身大小。

这意味着，如果您使用 chromeless 播放器，您可以使用 javascript 调整 div 大小，并play触发事件。