比如说,如果我在页面上有一个 iframe
允许用户在其中播放 YouTube 视频,例如:
<iframe width="640" height="390" src="https://www.youtube.com/embed/--id--"
frameborder="0" allowfullscreen></iframe>
有没有办法在其下方添加一个链接(或按钮),以便在有人点击它时可以全屏播放?
<p>Click <a href="???">here</a> to play it full screen.</p>
附言。我不使用 JQuery 或任何其他库。
最佳答案
基于 this回答:
var iframe = document.getElementById("iframe");
document.getElementById("fullScreen").addEventListener("click", function(){
iframe.setAttribute("style", "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;");
});
<iframe id="iframe" width="560" height="315" src="https://www.youtube.com/embed/oR_e9y-bka0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<p id="fullScreen">Click here to play it full screen.</p>
这里有一个例子 https://jsfiddle.net/2vgsb64a/因为 SO 框架会破坏 youtube。
关于javascript - 如何通过单击按钮全屏播放 YouTube 嵌入式视频?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51954858/