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

问题描述

我有一个嵌入在网页上的 Youtube 视频.

I have a Youtube video embeded on a webpage.

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

不能使用 Chromeless 播放器，因为该网站是为 iPad 设计的.

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

推荐答案

2013 年 11 月更新:这是可能的 - 真正的全屏，而不是全屏，使用以下技术.正如@chrisg 所说，YouTube JS API 没有默认全屏"选项.

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.

• 创建自定义播放按钮
• 使用 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)();
  }
})

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