Using a combination of the orientation and min-aspect-ratio media queries to make sure a 16:9 video always fits inside a modal (at all screen sizes and orientations) without any content being cut off

first-time-using-min-aspect-ratio.scss

@media (orientation: landscape) {
    // 1.77 represents the 16/9 aspect ratio.
    // 95vh / 1.77 gives us the max height our video can be to guarantee
    // its width won't be too large to fit on some awkward viewport dimensions.
    // 95vh / 1.77 = 53.672316384, and 53.672316384 * 1.77 = 95.
    // This is <100, so this stops our video ever being too wide to fit on the screen.
    width: calc((95vh / 1.77) * 1.77);
    height: calc(95vh / 1.77);
  }

  @media (orientation: landscape) and (min-aspect-ratio: 16/9) {
    // If the user's viewport has at least the proportions as a 16:9 video then
    // we can safely make the height bigger as we know there will be enough
    // width for it.
    width: calc(95vh * 1.77);
    height: 95vh;
  }

  @media (orientation: portrait) {
    // On portrait it's much easier as there will always be enough room to show
    // a 16:9 (landscape) video.
    width: 95vw;
    height: calc(95vw / 1.77);
  }