Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save philwolstenholme/03d2654a966d40e44e20ee240601e634 to your computer and use it in GitHub Desktop.
Save philwolstenholme/03d2654a966d40e44e20ee240601e634 to your computer and use it in GitHub Desktop.
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
@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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment