Question

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

当用户按下播放时，是否可以使用HTML5 iframe with Youtube's API将视频全屏显示？

使用Chromeless播放器不是一种选择，因为该网站适用于iPad。

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播放器，它会自己调整其父元素的宽度和高度。

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

Answer 3

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

最终用户必须采取措施才能启动全屏。

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

Answer 4

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

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

嵌入Youtube的自动全屏

4 个答案: