From ec77b5f471adb9925e3abe2400d49a37e14b72de Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Wed, 11 Mar 2026 13:28:03 -0700
Subject: [PATCH] feat(video-layout): make videos fill tiles and remove blurred
 background

Videos now use object-fit: cover in all thumbnail types, removing dark
bars around portrait videos. Hides the blurred large video background
and makes the large video fill its container edge-to-edge.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 css/_videolayout_default.scss                 | 23 ++++++++-----------
 .../filmstrip/components/web/Thumbnail.tsx    | 10 +-------
 2 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index 1c72cbf..e1bfd3f 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -25,20 +25,7 @@
 
 #largeVideoBackgroundContainer,
 .large-video-background {
-    height: 100%;
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    width: 100%;
-
-    #largeVideoBackground {
-        min-height: 100%;
-        min-width: 100%;
-    }
-}
-#largeVideoBackgroundContainer {
-    filter: blur(40px);
+    display: none;
 }
 
 .videocontainer {
@@ -122,6 +109,14 @@
 #largeVideoWrapper
 {
     object-fit: cover;
+    width: 100% !important;
+    height: 100% !important;
+    top: 0 !important;
+    left: 0 !important;
+}
+
+#largeVideo {
+    object-fit: cover;
 }
 
 #sharedVideo video {
diff --git a/react/features/filmstrip/components/web/Thumbnail.tsx b/react/features/filmstrip/components/web/Thumbnail.tsx
index f01aa16..ae9eb8d 100644
--- a/react/features/filmstrip/components/web/Thumbnail.tsx
+++ b/react/features/filmstrip/components/web/Thumbnail.tsx
@@ -665,19 +665,12 @@ class Thumbnail extends Component<IProps, IState> {
             _isHidden,
             _isScreenSharing,
             _participant,
-            _thumbnailType,
             _videoObjectPosition,
-            _videoTrack,
             _width,
             horizontalOffset,
             style
         } = this.props;
 
-        const isTileType = _thumbnailType === THUMBNAIL_TYPE.TILE;
-        const jitsiVideoTrack = _videoTrack?.jitsiTrack;
-        const track = jitsiVideoTrack?.track;
-        const isPortraitVideo = (track?.getSettings()?.aspectRatio || 1) < 1;
-
         let styles: {
             avatar: Object;
             thumbnail: any;
@@ -696,8 +689,7 @@ class Thumbnail extends Component<IProps, IState> {
         }
 
         let videoStyles: any = null;
-        const doNotStretchVideo = (isPortraitVideo && isTileType)
-            || _disableTileEnlargement
+        const doNotStretchVideo = _disableTileEnlargement
             || _isScreenSharing;
 
         if (canPlayEventReceived || _participant.local || _isVirtualScreenshareParticipant) {