Question

我正在尝试在我的网页上以全屏模式启动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的例子，所以我不明白为什么我的工作不起作用。

Answer 1

尝试通过添加[0]或.get（0）来选择DOM元素，而不是仅选择iframe的jQuery对象

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

Answer 2

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

iframe没有定义请求全屏方法

2 个答案: