fix cover sizing for videos with aspect ratios < 1

[dawaltconley]

I was using vidim for a video background with a vertical aspect ratio (3/4) and found that the video wasn't consistently covering the space like the horizontal ratios would.

I have not been able to build the project for testing, but I think the fix is pretty simple. This "just worked" for my project, but for my own sanity I'm going to walk through what happens with the current code on vertical videos.

This is the current code:

if (
  (
    1 < this._options.ratio
    && ( containerWidth / containerHeight ) < this._options.ratio
  )
  ||
  (
    1 > this._options.ratio
    && ( containerHeight / containerWidth ) < this._options.ratio
  )
) {
  // fit to height
} else {
  // fit to width
}

Which means that a video with an aspect ratio of 0.75 will fit to the height of its container when ( containerHeight / containerWidth ) < 0.75, and otherwise fit to its width.

This makes the breakpoint for the container a 4/3 aspect ratio. So when the container is wider than 4/3, the 3/4 video will fit to its height, showing the full video but leaving empty space on either side. When the container is narrower than 4/3, the 3/4 video will fit to its width, filling the container until the container gets narrower than the background video's 3/4 aspect ratio. At this point empty space will begin to appear above and below the video.

Simplifying the above to use the same rules for vertical and horizontal ratios...

if ( containerWidth / containerHeight < this._options.ratio ) {
  // fit to height
} else {
  // fit to width
}

...keeps the container breakpoint the same as the video ratio, and means that it will always fit to height when the container is taller than the video, and fit to width when the container is wider than the video.

Fwiw I only tested this on a self-hosted video, not Youtube, so I don't know if vertical youtube videos have some other behavior that the current code is accounting for.