Make youtube video fullscreen using iframe and javascript API

Solution 1:

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

Solution 2:

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.

Solution 3:

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

Solution 4:

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.