feross/yt-player

redefine width and height while resize the window

arnaudambro opened this issue · 1 comments

Hi @feross,
Very nice plugin, much more practical than what Google gives us ! I lost a few hours with them, and did everything in an hour with yours, congrats.

One thing : I try to make the iframe responsive like on this website: big mamma

In order to do that, I would need to change dynamically, inside a function called by window.addEventListener('resize'), the player options width ans height.
I hopeless tried it by doing player._opts.height = someValue but it's not changing the actual iframe dimensions.
It seems that once the player is loaded with some parameters, there is no way to modify those without reloading the page. Is it or did I miss something ? Do you have something to propose ?

Just found it : put a height: 100% and a width: 100% to the player, wrap it like below

HTML :

<div class="video__maincontainer">
  <div class="video__subcontainer">
    <div id="player"></div>
  </div>
</div>

and put this CSS :

CSS

 .video__maincontainer {
   position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   display: flex;  
   justify-content: center;
   align-items: center;
          
  .video__subcontainer {
      position: absolute;
      overflow: auto;
      height: 100vh;
      width: calc(100vh / 0.5625);
    }

  }