22

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.

Philip Kirkbride
  • 21,381
  • 38
  • 125
  • 225

4 Answers4

21

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)();
  }
})
mikemaccana
  • 110,530
  • 99
  • 389
  • 494
  • sorry but what is the function showVideoCallback(); ? – mpgn Jul 12 '14 at 21:17
  • @Martialp Just a legacy of my cutting down my production code to make a good example, I've deleted it now. – mikemaccana Jul 13 '14 at 11:57
  • Just wondering if there is a specific reason to use bind instead of call in this case? Wouldn't you have to define requestFullScreen outside so that things out of the function could access the requestFullScreen that is now being returned? – aug Dec 10 '14 at 18:25
  • where is player defined? – toobulkeh Feb 03 '15 at 02:43
  • 3
    I created a [demo on CodePen](http://codepen.io/bfred-it/pen/GgOvLM) and it seems that while the code works (only on desktop), **it breaks YouTube's own fullscreen behavior** in Chrome so I wouldn't suggest using it. -- I also want add that it **cannot** work on mobile since (1) you can't play videos through the YouTube API on iOS/Android and (2) even if you play the video by tapping on the player, requestFullScreen() needs immediate user action, so it won't fire "onPlay". So with one tap either you play the video or get it fullscreen; you'll always need two separate taps. – fregante Feb 06 '15 at 21:55
  • 1
    That's not true bfred.it, on Android you can call: webView.getSettings().setMediaPlaybackRequiresUserGesture(false); – virsunen Oct 28 '15 at 03:31
  • what is `playerWrapperClass` here? – Mando Jul 16 '16 at 01:04
  • 1
    @AlexeyStrakh a CSS class that the player element uses, eg `.player` or similar. – mikemaccana Jul 18 '16 at 18:45
  • @mikemaccana iOS works fine but Android gives me nothing except handlers to manually show the fullscreen video. I'm trying to handle the case when user doesn't have a youtube app installed (and for Android was following this post: http://stackoverflow.com/questions/14763483/android-webview-with-an-embedded-youtube-video-full-screen-button-freezes-video/15127046#15127046) – Mando Jul 21 '16 at 17:23
  • Just tested on my Samsung Galaxy and chrome. It works. I do have concern though as on desktop it breaks behaviour, as mentioned you need to click fullscreen twize to close it (unless using esc key). However - it gets the job done at the moment it seems. – Kim Steinhaug Jan 18 '18 at 13:43
  • @KimSteinhaug It worries me there still isn't a proper solution 5 years after I answered this. – mikemaccana Jan 18 '18 at 14:11
3

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.

Chris G.
  • 3,963
  • 2
  • 21
  • 40
0

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.

Teddy
  • 18,357
  • 2
  • 30
  • 42
  • 1
    What security concerns? Tricking the user into thinking that they are on their login screen and entering a password? As far as I know there is no way to get data from the user through a Youtube video. Would be interested to know what the security concerns are. – acarlon Dec 19 '13 at 08:51
-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();
    }
});
Stephen Rauch
  • 47,830
  • 31
  • 106
  • 135
Nick T
  • 29
  • 1
  • 3