iframe 没有定义请求全屏方法答案

【问题标题】：iframe has no defined request full screen methodiframe 没有定义请求全屏方法
【发布时间】：2016-10-20 21:16:04
【问题描述】：

我正在尝试让我的网页上的 YouTube 视频以全屏模式启动。由于 YouTube API 没有直接全屏调用，因此我试图通过在 iframe 本身上调用 requestFullScreen 函数来让 YouTube 视频以全屏模式启动，如 codepen 所示。

loadYoutubeAPI 在文档就绪时调用。这是调用 playIntroVideo() 的按钮。

a href="javascript:void(0);" onclick="playIntroVideo()"

这是我的 iframe（由 YouTube API 和我的函数生成）和生成它的函数。

<iframe id="player" frameborder="0" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&amp;origin=http%3A%2F%2Flocalhost%3A3000&amp;widgetid=1"></iframe>


function loadYoutubeAPI() {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

function onYouTubeIframeAPIReady() {

}

var player;
function playIntroVideo() {
    player = new YT.Player('player', {
        videoId: 'M7lc1UVf-VE',
        events: {
        'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    $('#player').attr("allowfullscreen", "true");
    var iframe = ($('#player'));
    event.target.playVideo();
    var requestFullScreen = iframe.requestFullscreen || iframe.msRequestFullscreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullscreen;
    if (requestFullScreen) {
        requestFullScreen.bind(iframe)();
    }
}

视频按要求播放，但未全屏播放。在 Chrome 的开发工具中检查不同的 requestFullscreens 会发现它们都是未定义的。但是，有无数人在 iframe 上调用 requestFullscreen 的例子，所以我不明白为什么我的不起作用。

【问题讨论】：

标签： javascript jquery ruby-on-rails iframe youtube

【解决方案1】：

不只是选择 iframe 的 jQuery 对象，而是尝试通过附加 [0] 或 .get(0) 来选择 DOM 元素

function onPlayerReady(event) {
    var iframe = $('#player')[0];
    ...
}

另外，如果您为 YouTube 播放器实例设置自定义参数，请确保将“fs”设置为 1 而不是 0。

function playIntroVideo() {
    player = new YT.Player('player', {
        videoId: 'M7lc1UVf-VE',
        playerVars: {
          fs: 1
        },
        events: {
        'onReady': onPlayerReady
        }
    });
}

【讨论】：

【解决方案2】：

您是否尝试将 allowFullScreen="true" 属性添加到 iframe html？（来自：Cant switch to fullscreen mode from an iframe） --- 看起来没有这个设置，iframe 不能全屏显示（https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe）

【讨论】：

这就是这行的作用 $('#player').attr("allowfullscreen", "true");我检查并添加它
刚刚玩了一会，我设法通过用普通的 javascript 而不是 jQuery 初始化 iframe 变量来访问.requestFullscreen() 方法：(var iframe = document.getElementById("player");) 然后，我不得不将全屏代码移动到按钮单击处理程序。不幸的是，我没有太多运气来覆盖对 Youtube 视频的点击。就个人而言，我会尝试用海报图像覆盖视频区域，该图像是“按钮”，然后触发代码以全屏运行 iframe。
这就是我正在做的事情。我有一个播放按钮，应该在全屏模式下触发 iframe
这个答案：stackoverflow.com/a/36129309/5865554 on stackoverflow.com/questions/15114884/… 有一个有效的 Codepen 示例，如果有帮助的话。
我按照@AndrewSerong 的建议使用纯 Javascript 更改 JQuery： var iframe = document.getElementById("player");它就像一个魅力。