fix(embed): allow flexible player sizes for embeds. Closes #2984

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

@@ -22,7 +22,7 @@
     height: 400px;
     max-height: 400px;
   }
-  
+
   //set height of player for mobile
   @include screen(mobile) {
     height: 250px;
@@ -37,6 +37,7 @@
   }
 }
 
-.fill {
+.embedded {
+  height: 100vh;
   max-height: unset;
 }

web/components/video/OwncastPlayer/OwncastPlayer.tsx

@@ -30,7 +30,7 @@ export type OwncastPlayerProps = {
   initiallyMuted?: boolean;
   title: string;
   className?: string;
-  fill?: boolean;
+  embedded?: boolean;
 };
 
 export const OwncastPlayer: FC<OwncastPlayerProps> = ({
@@ -39,7 +39,7 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({
   initiallyMuted = false,
   title,
   className,
-  fill,
+  embedded = false,
 }) => {
   const VideoSettingsService = useContext(VideoSettingsServiceContext);
   const playerRef = React.useRef(null);
@@ -314,7 +314,10 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({
         />
       )}
     >
-      <div className={classNames(styles.container, className, fill && styles.fill)} id="player">
+      <div
+        className={classNames(styles.container, className, embedded && styles.embedded)}
+        id="player"
+      >
         {online && (
           <div className={styles.player}>
             <VideoJS options={videoJsOptions} onReady={handlePlayerReady} aria-label={title} />

web/pages/embed/video/index.tsx

@@ -76,7 +76,7 @@ export default function VideoEmbed() {
         online={online}
         initiallyMuted={initiallyMuted}
         title={streamTitle || name}
-        fill
+        embedded
       />
       <Statusbar
         online={online}