Make video poster fill player and not use the logo. For #1857

web/components/video/OwncastPlayer.tsx

@@ -296,7 +296,9 @@ export default function OwncastPlayer(props: Props) {
         </div>
       )}
       <div style={{ gridColumn: 1, gridRow: 1 }}>
-        {!videoPlaying && <VideoPoster online={online} initialSrc="/logo" src="/thumbnail.jpg" />}
+        {!videoPlaying && (
+          <VideoPoster online={online} initialSrc="/thumbnail.jpg" src="/thumbnail.jpg" />
+        )}
       </div>
     </div>
   );

web/components/video/Player.module.scss

@@ -2,3 +2,8 @@
   height: 80vh;
   width: 100%;
 }
+
+.poster {
+  width: 100%;
+  height: 100%;
+}

web/components/video/VideoPoster.module.scss

@@ -2,4 +2,6 @@
   background-color: black;
   display: flex;
   justify-content: center;
+  width: 100%;
+  height: 100%;
 }

web/components/video/VideoPoster.tsx

@@ -30,7 +30,7 @@ export default function VideoPoster(props: Props) {
 
   return (
     <div className={s.poster}>
-      {!online && <img src={initialSrc} alt="logo" height="500vh" />}
+      {!online && <img src={initialSrc} alt="logo" />}
 
       {online && (
         <CrossfadeImage
@@ -38,7 +38,7 @@ export default function VideoPoster(props: Props) {
           duration={duration}
           objectFit="contain"
           width="100%"
-          height="500px"
+          height="100%"
         />
       )}
     </div>