title: How can i set fullscreen for iframe with outer container?
body: <p>How can i enter fullscreen for iframe with outer container ?</p>
  
  <p>When i execute this code:
  It does enter a full screen for this <code>&lt;div class="video-player"&gt;</code> but the iframe with youtube doesn't resize. What can i do to fix it ?</p>
  
  <p>I am using youtube api and my code looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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)();
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="video-player"&gt;
    &lt;div class="controls-wrapper"&gt;
      &lt;button&gt;play fullscreen&lt;/button&gt;
      &lt;br&gt;
    &lt;/div&gt;
    &lt;div class="height-checker"&gt;
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
      &lt;!-- 1. The &lt;iframe&gt; (and video player) will replace this &lt;div&gt; tag. --&gt;
      &lt;div id="player"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>