嵌入Youtube的自动全屏

I have a Youtube video embeded on a webpage.

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

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

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

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

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

4 个解决方案

#1

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.

2013年11月更新：这是可能的 - 真正的全屏，而不是完整的窗口，使用以下技术。正如@chrisg所说，YouTube JS API没有“默认全屏”选项。

Create a custom play button
创建自定义播放按钮
Use YouTube JS API to play video
使用YouTube JS API播放视频
Use HTML5 fullscreen API to make element fullscreen
使用HTML5全屏API使元素全屏

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

#2

This isn't possible with the youtube embed code or the youtube javascript API as far as I know. You would have to write your own player to have this functionality.

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

Doing some reading it looks like you can use the chromeless youtube player and it will resize itself to the width and height of its parent element.

做一些阅读看起来你可以使用chromeless youtube播放器，它会自己调整其父元素的宽度和高度。

That means that if you use the chromeless player you can resize the div with javascript with the play event is triggered.

这意味着如果您使用无边框播放器，您可以使用javascript调整div的大小，同时触发播放事件。

#3

No, this isn't possible, due to security concerns.

不，由于安全问题，这是不可能的。

The end user has to do something to initiate fullscreen.

最终用户必须做一些事情来启动全屏。

If you were to run an Adobe AIR application, you can automate the fullscreen activation w/o having end user do anything. But then it would be a desktop application, not a webpage.

如果您要运行Adobe AIR应用程序，则无需最终用户执行任何操作即可自动执行全屏激活。但那时它将是一个桌面应用程序，而不是一个网页。

#4

I thought I would post an easier updated method to solving this one using html5.

我想我会发布一个更简单的更新方法，用html5来解决这个问题。

.ytfullscreen is the name of the button or whatever you want clicked. #yrc-player-frame-0 is going to be the name of your iframe.

.ytfullscreen是按钮的名称或您想要点击的任何内容。＃yrc-player-frame-0将成为iframe的名称。

jQuery(".ytfullscreen").click(function () {
    var e = document.getElementById("yrc-player-frame-0");
    if (e.requestFullscreen) {
        e.requestFullscreen();
    } else if (e.webkitRequestFullscreen) {
        e.webkitRequestFullscreen();
    } else if (e.mozRequestFullScreen) {
        e.mozRequestFullScreen();
    } else if (e.msRequestFullscreen) {
        e.msRequestFullscreen();
    }
});

#1