Auto-Full Screen for a Youtube embed

by

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

Leave a Comment