Question

使用YouTube iframe嵌入式播放器，有没有办法以编程方式触发全屏？我想删除默认控件（使用controls = 0），但是可以自己创建自定义全屏按钮。

Answer 1

使iframe不是全屏而是整页：

    function fullscreen() {
        var vid = document.getElementById("vid");
        vid.style.position = "absolute";
        vid.style.width = "100vw";
        vid.style.height = "100vh";
        vid.style.top = "0px";
        vid.style.left = "0px";
        document.getElementById("exit").style.display = "inline";
    }
    function exitfullscreen() {
      var vid = document.getElementById("vid");
      vid.style.position = "";
      vid.style.width = "";
      vid.style.height = "";
      vid.style.top = "";
      vid.style.left = "";
      document.getElementById("exit").style.display = "none";
    }

<iframe width="560" height="315" src="https://www.youtube.com/embed/fq6qcvfZldE?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" id="vid" allowfullscreen></iframe>
    <button onClick="fullscreen()">Fullscreen</button>
    <button style="position: fixed; 
                   bottom: 5px; 
                   right: 5px; 
                   display: none;
                   z-index: 2000;" id="exit" onClick="exitfullscreen()">Exit Fullscreen</button>

代码段右上角的整页按钮也可以这样工作。如果你想让浏览器全屏显示，你可以尝试document.requestFullscreen();，但这仍然是实验性的，适用于很少的浏览器。请查看此函数的MDN主题。

编辑：刚刚发现这个：https://developers.google.com/youtube/?csw=1#player_apis，官方的YouTube播放器API。

Answer 2

在Webkit浏览器中尝试以下操作：

if (typeof iframe.webkitRequestFullScreen === 'function') {
    button.addEventListener('click', function () {
        iframe.webkitRequestFullScreen();
    }, false);
}

请注意，如果没有用户手势（在这种情况下，请“点击”），这将无效。

Answer 3

您可以使用此库XCDYouTubeKit代替iframe播放器它非常简单而有力。支持全屏和非全屏。

YouTube iframe播放器 - 在iOS上触发全屏

3 个答案: