YouTube的iframe的球员 - 在iOS上触发全屏(YouTube iframe playe

使用YouTube iframe嵌入播放器，有没有全屏编程触发方式？我想删除默认控件（通过控件= 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播放器。
它非常简单，功能强大。支持全屏和非全屏。