Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Auto-Full Screen for a Youtube embed

Tags:

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.

like image 416
Philip Kirkbride Avatar asked Sep 30 '11 19:09

Philip Kirkbride


1 Answers

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)();   } }) 
like image 113
mikemaccana Avatar answered Oct 23 '22 18:10

mikemaccana