YouTube iframe播放器-在iOS上全屏触发 [英] YouTube iframe player - trigger fullscreen on iOS
问题描述
使用YouTube iframe嵌入式播放器,是否可以通过程序触发全屏?我想删除默认控件(使用controls = 0),但是可以自行创建自定义全屏按钮.
使iframe不是全屏显示,而是整页显示:
函数fullscreen(){var vid = document.getElementById("vid");vid.style.position =绝对";vid.style.width ="100vw";vid.style.height ="100vh";vid.style.top ="0px";vid.style.left ="0px";document.getElementById("exit").style.display ="inline";}函数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宽度="560" height ="315" src ="https://www.youtube.com/embed/fq6qcvfZldErel = 0& amp; controls = 0& amp; showinfo = 0"frameborder =" 0"id =" vid"allowfullscreen</iframe>< button onClick ="fullscreen()">全屏</button>< button style ="position:固定的;底部:5px;右:5px;显示:无;z-index:2000;"id =" exit"onClick =" exitfullscreen()>退出全屏</button>
代码段右上角的整页按钮也可以通过这种方式工作.如果要使浏览器全屏显示,可以尝试 document.requestFullscreen();
,但这仍然是实验性的,仅在极少数浏览器上有效.看看此功能的 MDN 主题.>
刚发现以下内容: https://developers.google.com/youtube/?csw = 1#player_apis ,YouTube播放器的官方API.
Using the YouTube iframe embed player, is there a way to trigger fullscreen programatically? I want to remove the default controls (using controls=0) but then have the ability to create custom fullscreen button by itself.
Make the iframe not fullscreen but fullpage:
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&controls=0&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>
The full page button in the right upper corner of the code snippet also works this way. If you want to make the browser full screen you could try document.requestFullscreen();
, but this is still experimental and works on very few browsers. Take a look at the MDN topic of this function.
EDIT: Just found this: https://developers.google.com/youtube/?csw=1#player_apis, the official youtube player API.
这篇关于YouTube iframe播放器-在iOS上全屏触发的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!