Fix player sizing in different viewports. Closes #2360

2023-01-28 18:13:00 -08:00
parent c352e4a9c1
commit fb4b0a56cc
2 changed files with 4 additions and 8 deletions
--- 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 {
--- 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>