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

【问题标题】：How to play YouTube embedded video fullscreen from a button click?如何通过单击按钮全屏播放 YouTube 嵌入式视频？
【发布时间】：2018-08-22 04:39:12
【问题描述】：

假设我在页面上有一个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>

PS。我不使用 JQuery 或任何其他库。

【问题讨论】：

标签： javascript html css iframe youtube

【解决方案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。

【讨论】：

嗯。谢谢。虽然这种方法有一点问题。播放视频后，用户无法恢复该页面。因此，我一直在寻找一种“YouTube 认可”的方法。 IE。当用户点击播放器中的“全屏”按钮时也是如此。
@c00000fd 您要求使用 iframe 之外的东西全屏显示视频:)。由于我们不再在父页面中，因此无法回头。我认为唯一的方法是使用 iframe 的 API 和发布消息方法 developers.google.com/youtube/iframe_api_reference 与 iframe 进行通信。但老实说，我不知道这是否可能。