嵌入Youtube的自动全屏 [英] Auto-Full Screen for a Youtube embed

问题描述

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

当用户按下游戏时，可以使用 HTML5 iframe with Youtube's API ？

使用Chromeless播放器不是一种选择，因为网站的目标是：这是可能的 - 真正的全屏，而不是真正的全屏，而不是真正的全屏，而不是全窗口，使用以下技术。正如@chrisg所说，YouTube JS API没有默认全屏选项。

• 创建自定义播放按钮


• 使用YouTube JS API播放视频


• 使用HTML5全屏API制作元素全屏

以下是代码。 b $ b

  var $ = document.querySelector.bind（document）; 
 
 //用户点击自定义全屏按钮
 $（playButtonClass）.addEventListener（'click'，function（）{
 //播放视频并转到全屏
 player.playVideo（）; 
 
 var playerElement = $（playerWrapperClass）; 
 var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen; 
 if （requestFullScreen）{
 requestFullScreen.bind（playerElement）（）; 
} 
}）
  

I have a Youtube video embeded on a webpage.

Is it possible to have the video go full screen when the user presses play, using the HTML5 iframe with Youtube's API?

Using the Chromeless player is not an option as the website is intended for iPads.

解决方案

Update November 2013: this is possible - real fullscreen, not full window, with the following technique. As @chrisg says, the YouTube JS API does not have a 'fullscreen by default' option.

• Create a custom play button
• Use YouTube JS API to play video
• Use HTML5 fullscreen API to make element fullscreen

Here's the code.

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

这篇关于嵌入Youtube的自动全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！