Auto-Full Screen for a Youtube embed

Question

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?

Answer 1

I thought I would post an easier updated method to solving this one using html5.

.ytfullscreen is the name of the button or whatever you want clicked. #yrc-player-frame-0 is going to be the name of your iframe.

jQuery(".ytfullscreen").click(function () {
    var e = document.getElementById("yrc-player-frame-0");
    if (e.requestFullscreen) {
        e.requestFullscreen();
    } else if (e.webkitRequestFullscreen) {
        e.webkitRequestFullscreen();
    } else if (e.mozRequestFullScreen) {
        e.mozRequestFullScreen();
    } else if (e.msRequestFullscreen) {
        e.msRequestFullscreen();
    }
});

Answer 2

No, this isn't possible, due to security concerns.

The end user has to do something to initiate fullscreen.

If you were to run an Adobe AIR application, you can automate the fullscreen activation w/o having end user do anything. But then it would be a desktop application, not a webpage.

Answer 3

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)();
  }
})

Answer 4

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.