From fb4b0a56cc4a967e2842b64f5bc40a3527194bab Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sat, 28 Jan 2023 18:13:00 -0800
Subject: [PATCH] Fix player sizing in different viewports. Closes #2360

---
 .../video/OwncastPlayer/OwncastPlayer.module.scss         | 8 ++------
 web/components/video/VideoPoster/VideoPoster.tsx          | 4 ++--
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.module.scss b/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
index 65ac31a62..d34628eed 100644
--- a/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
+++ b/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
@@ -4,12 +4,8 @@
   display: grid;
   width: 100%;
   justify-items: center;
-  height: 78vh;
-
-  @include screen(tablet) {
-    aspect-ratio: 16 / 9;
-    height: unset;
-  }
+  max-height: 75vh;
+  aspect-ratio: 16 / 9;
 
   .player,
   .poster {
diff --git a/web/components/video/VideoPoster/VideoPoster.tsx b/web/components/video/VideoPoster/VideoPoster.tsx
index 1c21a3e6d..99f3a23bc 100644
--- a/web/components/video/VideoPoster/VideoPoster.tsx
+++ b/web/components/video/VideoPoster/VideoPoster.tsx
@@ -33,9 +33,9 @@ export const VideoPoster: FC<VideoPosterProps> = ({ online, initialSrc, src: bas
         <CrossfadeImage
           src={src}
           duration={duration}
-          objectFit="cover"
+          objectFit="contain"
+          height="auto"
           width="100%"
-          height="100%"
         />
       )}
     </div>