diff --git a/css/filmstrip/_tile_view.scss b/css/filmstrip/_tile_view.scss index 44bd177b9b..ecc651d26e 100644 --- a/css/filmstrip/_tile_view.scss +++ b/css/filmstrip/_tile_view.scss @@ -99,19 +99,6 @@ display: block; margin: 2px; } - - video { - object-fit: contain; - } - - /** - * Max-width corresponding to the ASPECT_RATIO_BREAKPOINT from features/filmstrip/constants. - */ - @media only screen and (max-width: 500px) { - video { - object-fit: cover; - } - } } } } diff --git a/react/features/filmstrip/components/web/Thumbnail.js b/react/features/filmstrip/components/web/Thumbnail.js index 3a6aa0e4d2..f44b4da9fd 100644 --- a/react/features/filmstrip/components/web/Thumbnail.js +++ b/react/features/filmstrip/components/web/Thumbnail.js @@ -479,17 +479,18 @@ class Thumbnail extends Component { } let videoStyles = null; + const doNotStretchVideo = (_height < 320 && tileViewActive) + || _disableTileEnlargement + || _isScreenSharing; - if (!_isScreenSharing) { - if (canPlayEventReceived || _participant.local) { - videoStyles = { - objectFit: (_height < 320 && tileViewActive) || _disableTileEnlargement ? 'contain' : 'cover' - }; - } else { - videoStyles = { - display: 'none' - }; - } + if (canPlayEventReceived || _participant.local) { + videoStyles = { + objectFit: doNotStretchVideo ? 'contain' : 'cover' + }; + } else { + videoStyles = { + display: 'none' + }; } styles = {