title: Calculating the scale value to transform an iframe to cover it's content in the viewport
body: <p>I'm trying to make the object-fit: cover (or background-size: cover if it were an image) using an iframe with a vimeo video. As vimeo adjusts the video size according to the iframe width/height/aspect-ratio I thought that using the <code>transform: scale</code> property could be achieved.</p>
  
  <p>Right know I have this logic to scale an iframe with a vimeo video, in most of the cases does the job (covers the screen) but it's not perfect:</p>
  
  <pre><code>const w = window.innerWidth
  const h = window.innerHeight
  const ratioVideo = 640 / 360
  const ratioScreen = w / h
  
  const calculatedRatio = ratioVideo / ratioScreen
  // minimum scale value
  const minRatio = 1.45
  
  scaleVideo = calculatedRatio &gt; minRatio ? calculatedRatio : minRatio
  </code></pre>
  
  <p>And then I have:</p>
  
  <pre><code>&lt;iframe :style="`transform:scale(${scaleVideo})`"..&gt;
  </code></pre>
  
  <p>but it won't fill completely the viewport, expecially when the viewport ratio is &lt; 1 (landscape with much more width than height)</p>
  
  <p>How would be the right calculation (of the minimun scale transform value) for every resolution? I guess i have the separete the portrait/landscape but can't find the key</p>
  
  <p>Any thoughts?</p>
  
  <p>-EDIT-</p>
  
  <p>Here is a <a href="https://codepen.io/toni-michel-caubet/pen/povZRqz" rel="nofollow noreferrer">codepen</a> with my current code if it helps to understand (in vanilla js because i'm using vuejs in my environment)</p>
  
  <p>-UPDATE-</p>
  
  <p>This updated <a href="https://codepen.io/toni-michel-caubet/pen/NWPEXEJ" rel="nofollow noreferrer">codepen</a> almost achieves what i mean, but for reason i have to add a small percentage to the caculated ratio, I guess it's becuase the scroll bars or something? code preview:</p>
  
  <pre><code>let calculate = function () {
    const w = window.innerWidth
    const h = window.innerHeight
    const ratioVideo = 640 / 360
    const ratioScreen = w / h
  
    if (ratioScreen &gt; ratioVideo) {
      calculatedRatio = ratioScreen / ratioVideo
    } else {
      calculatedRatio = ratioVideo / ratioScreen
    }
  
    /* a little % more */
    calculatedRatio = calculatedRatio * 1.07 
    document.documentElement.style.setProperty('--s', calculatedRatio);
  }
  </code></pre>