解决方法
使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&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>
代码片段右上角的全页按钮也以这种方式工作.如果要使浏览器全屏,您可以尝试使用document.requestFullscreen();但是这仍然是实验性的,并且在很少的浏览器上运行.看看这个功能的MDN主题.
编辑:刚刚发现:https://developers.google.com/youtube/?csw=1#player_apis,官方的YouTube播放器API.