I have code that can make a html video tag full screen, but that code does not succeed with Youtube videos.  Youtube videos are embedded in iframes, and the code will maximize the iframe, but it will not maximize the video within the iframe.  So you get a black screen that covers your monitor, and in the upper left, you have the video, still the same size that it was. 

I might guess that I could reload the youtube video once the iframe was maximized, but it did not seem to work.

This is my iframe:

1. < iframe id ="iframe1" width ="560" height ="315" src ="https://www.youtube.com/embed/gultQ4LPmzg" frameborder ="0" allowfullscreen ></ iframe >

This is my call to my function:

1. < a href ="#" onclick ="maximizeVideo('iframe1')"> Maximize the iframe </ a >< br />

This is the function itself:

1. < script type ="text/javascript">

   function maximizeVideo(theid) {

   var playerElement;

   playerElement = document.getElementById(theid)

   var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen || playerElement.msRequestFullscreen;

   if (requestFullScreen) {

   requestFullScreen.bind(playerElement)();

   // $(theid).attr('src', $(theid).attr('src'));

   }

   else {

   alert( "at the bottom right of the video there is a icon with 4 arrows. If you click on it, you will maximize the video. To minimize the video, just press the ESC key (usually) at the top of your keyboard." );

   }

   }

   </ script >