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

使用YouTube iframe嵌入式播放器,是否可以通过程序方式触发全屏?我想删除默认控件(使用controls = 0),但是可以自己创建自定义全屏按钮.

解决方法

使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.

相关文章

HTML代码中要想改变字体颜色,常常需要使用CSS样式表。CSS是...
HTML代码如何让字体盖住图片呢?需要使用CSS的position属性及...
HTML代码字体设置 在HTML中,我们可以使用标签来设置网页中的...
在网页设计中,HTML代码的字体和字号选择是非常重要的一个环...
HTML(Hypertext Markup Language,超文本标记语言)是一种用...
外链是指在一个网页中添加一个指向其他网站的链接,用户可以...