当前位置：文江博客话题详情

自动全屏嵌入 Youtube

发布于 2024-12-07 11:32:40 字数 225 浏览 2 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南薇 2024-12-14 11:32:40

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

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

回复收藏 0 原文

空心空情空意 2024-12-14 11:32:40

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

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

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

回复收藏 0 原文

许久 2024-12-14 11:32:40

不，出于安全考虑，这是不可能的。

最终用户必须执行某些操作才能启动全屏。

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

回复收藏 0 原文

浅黛梨妆こ 2024-12-14 11:32:40

我想我会发布一种更简单的更新方法来使用 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();
    }
});

I thought I would post an easier updated method to solving this one using 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.

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

回复收藏 0 原文

~没有更多了~