全屏播放 Youtube iframe

Question

我在 iframe 中有一个包含嵌入式 Youtube 视频的页面。我想在有人播放视频时将视频设置为全屏。我尝试了很多东西，但似乎无法正常工作。

我的代码：

 <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 来完成这个，但没有成功。

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

任何人？

原文由 Mr. Sam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我会尝试 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 }
    });
});

原文由 The One and Only ChemistryBlob 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 youtube Iframe Api 并将其设置为监听播放器事件： https ://developers.google.com/youtube/iframe_api_reference

一旦你得到播放事件调用你的全屏功能

            function launchIntoFullscreen(element) {
              if(element.requestFullscreen) {
                element.requestFullscreen();
              } else if(element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
              } else if(element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
              } else if(element.msRequestFullscreen) {
                element.msRequestFullscreen();
              }
            }

            function onPlayerStateChange(event) {
              if (event.data == YT.PlayerState.PLAYING) {
                 launchIntoFullscreen(YOURIFRAME)
              }
            }

原文由 StackOverMySoul 发布，翻译遵循 CC BY-SA 3.0 许可协议