全屏播放Youtube iframe [英] Play Youtube iframe full screen

问题描述

我有一个页面，其中在iframe中嵌入了Youtube视频.每当有人播放视频时，我都希望将其设置为全屏显示.我已经尝试了很多东西，但似乎无法正常工作.

I've got a page with a embedded Youtube video in a iframe. I want to set the video to full screen whenever someone plays the video. I've tried many things but can't seem to get it working.

我的代码:

<div class="video-wrapper">
    <div class="video">
        <iframe id="home-video" allowfullscreen="allowfullscreen"     mozallowfullscreen="mozallowfullscreen"
                                        msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen"
                                        webkitallowfullscreen="webkitallowfullscreen" frameborder="0"
                                        src="https://www.youtube.com/watch_popup?v=dQw4w9WgXcQ">
        </iframe>
    </div>
</div>

我还尝试使用Youtube Api完成此操作，但没有成功.

I also tried to accomplish this with the Youtube Api, but without success.

 <script src="https://www.youtube.com/iframe_api"></script>

有人吗?

推荐答案

我会尝试适用于HTML5的全屏API :

function fullScreen() {

    var e = document.getElementById("video-wrapper");
    if (e.requestFullscreen) {
        e.requestFullscreen();
    } else if (e.webkitRequestFullscreen) {
        e.webkitRequestFullscreen();
    } else if (e.mozRequestFullScreen) {
        e.mozRequestFullScreen();
    } else if (e.msRequestFullscreen) {
        e.msRequestFullscreen();
    }
}

function YTStateChange(event) {
    switch(event.data) {
        case -1:
            fullScreen();
        break;
        case 1:
            // some code
        break;
        case 2:
            // some code 
        break;
        default:
        break;
    }
}

$(document).ready(function () {
    var player = new YT.Player( 'video-wrapper', {
        events: { 'onStateChange': YTStateChange }
    });
});

这篇关于全屏播放Youtube iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！