jeffemmett
/
jeffsi-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Jeff Emmett 2026-03-11 13:28:03 -07:00
parent 325960fa15
commit ec77b5f471
2 changed files with 10 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
css/_videolayout_default.scss
View File

@ -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 {

10
react/features/filmstrip/components/web/Thumbnail.tsx
View File

@ -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) {