title: How to add a button to play YouTube video full screen using JavaScript?
body: <p>I'm coding a Google Chrome extension where I embed a YouTube video:</p>
  
  <pre><code>&lt;iframe id="ytplayer" type="text/html" width="640" height="360"
  src="https://www.youtube.com/embed/M7lc1UVf-VE"
  frameborder="0" allowfullscreen&gt;
  </code></pre>
  
  <p>I then added a button below that should allow a user to click to play this video in full screen:</p>
  
  <pre><code>&lt;a href="#" id="lnkFullScreen"&gt;Play full screen&lt;/a&gt;
  </code></pre>
  
  <p>The work is done via JavaScript (and jQuery) using the code I <a href="https://stackoverflow.com/a/20289540/843732">found here</a>:</p>
  
  <pre><code>$("#lnkFullScreen").click(function(e)
  {
      e.stopPropagation();
      e.preventDefault();
  
      var playerElement = document.getElementById("ytplayer");
  
      playerElement.playVideo();   //`playVideo` is undefined
  
      var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
      if (requestFullScreen)
      {
          requestFullScreen.bind(playerElement)();
      }
  });
  </code></pre>
  
  <p>But when I run this code the <code>playVideo</code> function is <code>undefined</code> for <code>playerElement</code>.</p>
  
  <p>Any idea what am I doing wrong?</p>
  
  <p>PS. I want my player to remain in HTML5.</p>