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

Posted 2023-02-24

【中文标题】YouTube iframe 播放器 - 在 iOS 上触发全屏

【英文标题】：YouTube iframe player - trigger fullscreen on iOS

【发布时间】：2012-09-03 22:01:55

【问题描述】：

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

【问题讨论】：

您可以尝试查看 AVPlayer 类的 UIWebView 子视图，并将其图层全屏显示

【参考方案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   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>

代码sn-p右上角的整页按钮也是这样工作的。如果您想让浏览器全屏显示，您可以尝试document.requestFullscreen();，但这仍然是实验性的，适用于极少数浏览器。看看这个函数的MDN话题。

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

【参考方案2】：

您可以使用这个库 XCDYouTubeKit 代替 iframe 播放器。 它非常简单而强大。支持全屏和非全屏。

【讨论】：

我不明白这是如何回答问题的

它不 :) 它只是他想要实现的替代解决方案（并且可能是最快和最简单的方法）

【参考方案3】：

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

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

请注意，如果没有用户手势（在本例中为“点击”），这将无法工作。