How can i set fullscreen for iframe with outer container?

Question

How can i enter fullscreen for iframe with outer container ?

When i execute this code: It does enter a full screen for this <div class="video-player"> but the iframe with youtube doesn't resize. What can i do to fix it ?

I am using youtube api and my code looks like this:

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

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

var player, continer;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '100%',
    width: '100%',
    videoId: 'izGwDsrQ1eQ',
    playerVars: {
      autoplay: 0,
      html5: 1,
      theme: "light",
      modesbranding: 0,
      color: "white",
      iv_load_policy: 3,
      showinfo: 0,
      controls: 0
    },
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  var player = event.target;
  continer = $('.video-player');
  setupListener();
}

function stopVideo() {
  player.stopVideo();
}

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

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

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

.video-wrapper {
  height: auto;
  position: relative;
  padding-bottom: 15px;
  background: $whiteRGBA;
  border: 2px solid $whiteRGBA;
  border-radius: 8px;
  margin: 12px 0 9px;
}
.height-checker {
  position: relative;
}
.canvas {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0);
}
.height-checker {
  position: relative;
}

<div class="video-player">
  <div class="controls-wrapper">
    <button>play fullscreen</button>
    <br>
  </div>
  <div class="height-checker">
    <canvas id="canvas"></canvas>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>
  </div>
</div>

Answer 1

// first check full screen is available or not !

if (
document.fullscreenEnabled || 
document.webkitFullscreenEnabled || 
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
) {}

then you call full screen action

var i = document.getElementById("myimage");

// go full-screen
if (i.requestFullscreen) {
  i.requestFullscreen();
} else if (i.webkitRequestFullscreen) {
  i.webkitRequestFullscreen();
} else if (i.mozRequestFullScreen) {
  i.mozRequestFullScreen();
} else if (i.msRequestFullscreen) {
  i.msRequestFullscreen();
}

here is a blog post i think useful to read !

Answer 2

First Point is that the request full screen is Experimental

Mozilla Developer Network Says

This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

Second Point is an iframe can be defined with allowfullscreen flag

Iframe Allow full screen - Mozilla developer network

You can try to set the allowFullscreen dynamically before you request for full screen

Answer 3

There is a German blog wich explain this problem and some Solutions. I try to repeat how to do this:

To make the width of the video responsive is very easy. Just do it at he CSS.

The HTML:

<iframe width="560" height="315" src="https://www.youtube.com/embed/9T7eSyo7DRU" frameborder="0" allowfullscreen></iframe>

The CSS:

img,
iframe {
  max-width: 100%;
}

For making the height responsive he uses this code:

The HTML:

<div class="embed-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/9T7eSyo7DRU" frameborder="0" allowfullscreen></iframe>
</div>

The CSS:

.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.embed-container iframe {

  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}

I hope this is helping you! You can find the blogpost here Maybe you have a good translation programm;)

I knew you don't want it full responsive but maybe it helps to make your project.