【问题标题】: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 进行通信。但老实说,我不知道这是否可能。
    猜你喜欢
    • 2017-02-22
    • 2021-11-03
    • 1970-01-01
    • 2016-03-19
    • 1970-01-01
    • 2020-08-25
    • 1970-01-01
    • 2014-04-21
    • 1970-01-01
    相关资源
    最近更新 更多