javascript - How can i set fullscreen for iframe with outer container? -

how can enter fullscreen iframe outer container ?

when execute code: enter full screen <div class="video-player"> iframe youtube doesn't resize. can fix ?

i using youtube api , code looks 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. <iframe> (and video player) replace <div> tag. -->      <div id="player"></div>    </div>  </div>

first point request full screen experimental

mozilla developer network says

this experimental technology because technology's specification has not stabilized, check compatibility table proper prefixes use in various browsers. note syntax , behavior of experimental technology subject change in future versions of browsers spec changes.

second point iframe can defined allowfullscreen flag

iframe allow full screen - mozilla developer network

you can try set allowfullscreen dynamically before request full screen