javascript - 如何通过单击按钮全屏播放 YouTube 嵌入式视频？

Question

比如说，如果我在页面上有一个 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 或任何其他库。

Answer 1

基于 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。