CODEWITHSUNDEEP
javascripthtmlcssiframeyoutube
c00000fd
c00000fd

Reputation: 22255

How to play YouTube embedded video fullscreen from a button click?

Say, if I have an iframe on the page that allows users to play a YouTube video in it, as such:

<iframe width="640" height="390" src="https://www.youtube.com/embed/--id--"
     frameborder="0" allowfullscreen></iframe>

Is there a way to have a link (or a button) below it that would allow to play it full-screen when someone clicks it?

<p>Click <a href="???">here</a> to play it full screen.</p>

PS. I don't use JQuery or any other libraries.

Upvotes: 0

Views: 1215

Answers (1)

Emeeus
Emeeus

Reputation: 5250

Based in this answer: 

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>

Here an example https://jsfiddle.net/2vgsb64a/ because SO framing brocks youtube.

Upvotes: 1

Related Questions