iframe没有定义的请求全屏方法 [英] iframe has no defined request full screen method

问题描述

我正在尝试让我的网页上的YouTube视频以全屏模式开始.由于YouTube API没有直接进行全屏调用，因此我试图通过在iframe本身上调用requestFullScreen函数来使YouTube视频以全屏模式开始，如此

I'm trying to have a YouTube video on my web page start in full screen mode. Since the YouTube API doesn't have a full screen call directly, I'm trying to get a YouTube video to start in fullscreen mode by calling a requestFullScreen function on the iframe itself as seen in this codepen.

loadYoutubeAPI在准备好文档时被调用.这是调用playIntroVideo()的按钮.

loadYoutubeAPI is called on document ready. This is the button that calls playIntroVideo().

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

这是我的iframe(由YouTube API和我的函数生成)以及生成它的函数.

Here is my iframe (generated by YouTube API and my function) and the functions that generate it.

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

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

The video plays as requested but does not go full screen. Checking the different requestFullscreens in Chrome's dev tools reveals they are all undefined. However, there are countless examples of people calling requestFullscreen on iframes so I don't understand why mine isn't working.

推荐答案

您是否尝试过将allowFullScreen="true"属性添加到iframe html? (摘自:无法从iframe切换到全屏模式) ---好像没有此设置，就无法使iframe进入全屏状态( https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe )

Have you tried adding the allowFullScreen="true" attribute to the iframe html? (from: Cant switch to fullscreen mode from an iframe) --- looks like without this set, an iframe can't be made to go full screen (https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe)

这篇关于iframe没有定义的请求全屏方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！