From 395a315068c26165bf908ac6856d3b9634727670 Mon Sep 17 00:00:00 2001
From: sawka <mike.sawka@gmail.com>
Date: Thu, 14 Mar 2024 10:11:48 -0700
Subject: [PATCH] make video responsive to container

---
 src/plugins/media/media.less | 7 +++++++
 src/plugins/media/media.tsx  | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/plugins/media/media.less b/src/plugins/media/media.less
index 8b3b929ab..a77d18b2b 100644
--- a/src/plugins/media/media.less
+++ b/src/plugins/media/media.less
@@ -4,4 +4,11 @@
     align-items: center;
     justify-content: center;
     padding-top: var(--termpad);
+
+    video {
+        object-fit: contain;
+        object-position: center;
+        height: 100%;
+        width: auto;
+    }
 }
diff --git a/src/plugins/media/media.tsx b/src/plugins/media/media.tsx
index c2dcb1124..aad7b9858 100644
--- a/src/plugins/media/media.tsx
+++ b/src/plugins/media/media.tsx
@@ -46,10 +46,10 @@ class SimpleMediaRenderer extends React.Component<
         let fullVideoUrl = GlobalModel.getBaseHostPort() + fileUrl;
         const opts = this.props.opts;
         const height = opts.idealSize.height - 10;
-        const width = opts.idealSize.width - 10;
+        const width = opts.maxSize.width - 10;
         return (
-            <div className="media-renderer">
-                <video width={width} height={height} controls>
+            <div className="media-renderer" style={{ height: height, width: width }}>
+                <video controls>
                     <source src={fullVideoUrl} />
                 </video>
             </div>