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

前端之家收集整理的这篇文章主要介绍了YouTube iframe播放器 – 在iOS上触发全屏前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用YouTube iframe嵌入式播放器,是否可以通过程序方式触发全屏?我想删除默认控件(使用controls = 0),但是可以自己创建自定义全屏按钮.

解决方法

使iframe不是全屏,但全页:
  1. function fullscreen() {
  2. var vid = document.getElementById("vid");
  3. vid.style.position = "absolute";
  4. vid.style.width = "100vw";
  5. vid.style.height = "100vh";
  6. vid.style.top = "0px";
  7. vid.style.left = "0px";
  8. document.getElementById("exit").style.display = "inline";
  9. }
  10. function exitfullscreen() {
  11. var vid = document.getElementById("vid");
  12. vid.style.position = "";
  13. vid.style.width = "";
  14. vid.style.height = "";
  15. vid.style.top = "";
  16. vid.style.left = "";
  17. document.getElementById("exit").style.display = "none";
  18. }
  1. <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>
  2. <button onClick="fullscreen()">Fullscreen</button>
  3. <button style="position: fixed;
  4. bottom: 5px;
  5. right: 5px;
  6. display: none;
  7. 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相关文章