From 8da30ad98f3581a2bee2939b6234b640d332e2c7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 14 Apr 2022 15:47:55 -0500
Subject: [PATCH] Fix video letterboxing

---
 app/soapbox/features/video/index.js     | 6 ++++--
 app/styles/components/video-player.scss | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/video/index.js b/app/soapbox/features/video/index.js
index 869fcdfce..72d18be0e 100644
--- a/app/soapbox/features/video/index.js
+++ b/app/soapbox/features/video/index.js
@@ -13,6 +13,8 @@ import Icon from 'soapbox/components/icon';
 import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
 import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
 
+const DEFAULT_HEIGHT = 300;
+
 const messages = defineMessages({
   play: { id: 'video.play', defaultMessage: 'Play' },
   pause: { id: 'video.pause', defaultMessage: 'Pause' },
@@ -513,7 +515,7 @@ class Video extends React.PureComponent {
         height = Math.floor(containerWidth / aspectRatio);
       }
 
-      if (height) playerStyle.height = height;
+      playerStyle.height = height || DEFAULT_HEIGHT;
     }
 
     let warning;
@@ -553,7 +555,7 @@ class Video extends React.PureComponent {
           aria-label={alt}
           title={alt}
           width={width}
-          height={height || 300}
+          height={height || DEFAULT_HEIGHT}
           volume={volume}
           onClick={this.togglePlay}
           onKeyDown={this.handleVideoKeyDown}
diff --git a/app/styles/components/video-player.scss b/app/styles/components/video-player.scss
index 4f40b06aa..aff5bb19f 100644
--- a/app/styles/components/video-player.scss
+++ b/app/styles/components/video-player.scss
@@ -119,6 +119,7 @@
     video {
       object-fit: contain;
       position: relative;
+      max-height: 100%;
     }
   }