Make youtube video fullscreen using iframe and javascript API

Question

I have an embedded youtube video with hidden controls:

<iframe id="ytplayer" type="text/html" width="400" height="225"
src="http://www.youtube.com/embed/dMH0bHeiRNg?rel=0&controls=0&showinfo=0
&loop=1&hd=1&modestbranding=1&enablejsapi=1&playerapiid=ytplayer"
frameborder="0" allowfullscreen></iframe>

I can control it with the youtube Javascript API.

var tag = document.createElement('script');

tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
  events: {
    'onReady': onPlayerReady,
    'onStateChange': onPlayerStateChange
  }
});
}

Things like player.playVideo() and so on work perfectly. Now I am looking for a way to make the video play in fullscreen mode with a Javascript call but I couldn't find any method in the API.

Is it even possible (without the controls) and if so - how?

AFAIK the "true" full-screen is made with Flash (or that _sort of things_)... — Adriano Repetti, Feb 27 '13 at 14:46
@Adriano Flash is not necessary, a Fullscreen API does already exists, and is implemented by all modern browsers except for IE(10): http://caniuse.com/#feat=fullscreen — Rob W, Feb 27 '13 at 14:49
@RobW nice, I didn't know it. So sad it's almost impossible to use it if it's not supported by IE (even 10)...:( — Adriano Repetti, Feb 27 '13 at 14:56
@Adriano That's not necessarily a problem. Use the HTML5 API when available, and use a fallback (such as Flash) when necessary. — Rob W, Feb 27 '13 at 14:58

score 9 · Answer 1 · answered Mar 21 '16 at 11:02

This worked perfect in my case. You can find more details on this link: demo on CodePen

var player, iframe;
var $ = document.querySelector.bind(document);

// init player
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '200',
    width: '300',
    videoId: 'dQw4w9WgXcQ',
    events: {
      'onReady': onPlayerReady
    }
  });
}

// when ready, wait for clicks
function onPlayerReady(event) {
  var player = event.target;
  iframe = $('#player');
  setupListener(); 
}

function setupListener (){
$('button').addEventListener('click', playFullscreen);
}

function playFullscreen (){
  player.playVideo();//won't work on mobile

  var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(iframe)();
  }
}

I think [`.requestFullscreen`](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen) and `.webkitRequestFullscreen` each have a lower case **s**. Moz is the [only](https://stackoverflow.com/a/30044770/673991) three-hump camel. — Bob Stein, Mar 26 '21 at 21:32
Note that for iPhone there's no `.webkitRequestFullscreen` and instead there is a `.webkitEnterFullscreen` method that works only on ` — Roman Bekkiev, May 11 '23 at 11:21

Zaffy · Answer 2 · 2016-03-19T22:22:01.527

6

You can use html5 fullscreen api:

node.requestFullScreen();
document.cancelFullScreen();
document.fullScreen; // bool

But note that:

this usually requires vendor specific prefix like mozRequestFullScreen() or webkitRequestFullScreen
requestFullScreen has to be called on user events (like onclick)
in firefox the fullscreen will be black until "Allow" is clicked by user

edited Mar 19 '16 at 22:22

answered Jan 01 '14 at 12:39

Zaffy

16,801
8
50
77

PSA: note the capital `S` in `requestFullScreen`, afaik it's deprecated (but possibly still in firefox) and should have a small `s`; `requestFullscreen`. This took me a while to figure out – TrySpace May 29 '20 at 08:50
Please update the answer. It is outdated and caused me some issues - it is now called `exitFullscreen()` and it returns a promise [reference](https://developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen) and `fullscreen` property is deprecated in favor of `fullscreenElement` – soulshined Jul 08 '21 at 01:26

score 5 · Answer 3 · edited May 23 '17 at 12:10

5

I've added code to do fullscreen (real full screen, not full window) to my answer on Auto-Full Screen for a Youtube embed.

YouTube don't expose fullscreen in their API, but you can call the native browser requestFullScreen() function from the playerStateChange() event from the YouTube API or make your own custom play button like I have.

edited May 23 '17 at 12:10

Community

1
1

answered Nov 29 '13 at 16:31

mikemaccana

110,530
99
389
494

I'm using the native browser requestFullScreen() function, but then the full screen button on youtube remains the same, meaning that it is expecting to fullsize the screen when you click . Any ideas about how to update the button from fullsize to close fullsize? – Despertaweb Mar 06 '20 at 10:01

score 1 · Answer 4 · edited May 23 '17 at 12:18

Looking at the API reference for the iframe player, I don't think it's possible to set it to fullscreen (with the iframe API alone)- ctrl f didn't find fullscreen, so either it's a secret method hidden inside the API or it doesn't exist. However, as you probably know, you can set the size of the player player.setSize(width:Number, height:Number):Object, then make the window fullscreen.

score 0 · Answer 5 · edited May 23 '17 at 10:29

0

Maybe have a look at this similar question. It looks as though this might work for you (using the javascript fullscreen api rather than the Youtube API):

Full Screen Option in Chromeless player using Javascript?

edited May 23 '17 at 10:29

Community

1
1

answered Feb 27 '13 at 14:50

David Heijl

399
2
5

score -5 · Answer 6 · edited Feb 27 '13 at 15:23

-5

You can try setting the iframe dimension to the window dimension through javascript.

Something like this (using jQuery):

$('ytplayer').attr('width', $(window).width());
$('ytplayer').attr('height', $(window).height());

I hope this can help you.

edited Feb 27 '13 at 15:23

Darin Kolev

3,401
13
31
46

answered Feb 27 '13 at 15:03

Vidoz

11

4

I think the poster means truly full screen, ie larger than the window. – mikemaccana Nov 28 '13 at 18:18

Make youtube video fullscreen using iframe and javascript API

6 Answers6

Linked

Related