Auto-Full Screen for a Youtube embed

I have a Youtube video embeded on a webpage.

Is it possible to have the video go full screen when the user presses play, using the HTML5 iframe with Youtube's API?

Using the Chromeless player is not an option as the website is intended for iPads.

Solution 1:

Update November 2013: this is possible - real fullscreen, not full window, with the following technique. As @chrisg says, the YouTube JS API does not have a 'fullscreen by default' option.

• Create a custom play button
• Use YouTube JS API to play video
• Use HTML5 fullscreen API to make element fullscreen

Here's the code.

var $ = document.querySelector.bind(document);

// Once the user clicks a custom fullscreen button
$(playButtonClass).addEventListener('click', function(){
  // Play video and go fullscreen
  player.playVideo();

  var playerElement = $(playerWrapperClass);
  var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(playerElement)();
  }
})

Solution 2:

This isn't possible with the youtube embed code or the youtube javascript API as far as I know. You would have to write your own player to have this functionality.

Doing some reading it looks like you can use the chromeless youtube player and it will resize itself to the width and height of its parent element.

That means that if you use the chromeless player you can resize the div with javascript with the play event is triggered.