Play around with sizing and placement of player. For #2204 and #2303

web/components/video/OwncastPlayer/OwncastPlayer.module.scss

@@ -0,0 +1,16 @@
+.container {
+  display: grid;
+  width: 100%;
+  justify-items: center;
+
+  .player,
+  .poster {
+    // position: static;
+    // height: auto !important;
+    width: 100%;
+    grid-column: 1;
+    grid-row: 1;
+    aspect-ratio: 16 / 9;
+    max-height: 75vh;
+  }
+}

web/components/video/OwncastPlayer/OwncastPlayer.tsx

@@ -10,6 +10,8 @@ import PlaybackMetrics from '../metrics/playback';
 import createVideoSettingsMenuButton from '../settings-menu';
 import LatencyCompensator from '../latencyCompensator';
 
+import styles from './OwncastPlayer.module.scss';
+
 const VIDEO_CONFIG_URL = '/api/video/variants';
 const PLAYER_VOLUME = 'owncast_volume';
 const LATENCY_COMPENSATION_ENABLED = 'latencyCompensatorEnabled';
@@ -297,13 +299,13 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({ source, online }) => {
   );
 
   return (
-    <div style={{ display: 'grid', width: '100% !important', aspectRatio: '16/9' }}>
+    <div className={styles.container}>
       {online && (
-        <div style={{ gridColumn: 1, gridRow: 1 }}>
+        <div className={styles.player}>
           <VideoJS options={videoJsOptions} onReady={handlePlayerReady} />
         </div>
       )}
-      <div style={{ gridColumn: 1, gridRow: 1 }}>
+      <div className={styles.poster}>
         {!videoPlaying && (
           <VideoPoster online={online} initialSrc="/thumbnail.jpg" src="/thumbnail.jpg" />
         )}

web/components/video/VideoJS/VideoJS.module.scss

@@ -7,8 +7,3 @@
     position: static !important;
   }
 }
-
-.poster {
-  width: 100%;
-  height: 100%;
-}