diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index 80cfea594..58b08a24e 100644
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@@ -166,7 +166,7 @@ UI.start = function() {
     // resizeVideoArea) because the animation is not visible anyway. Plus with
     // the current dom layout, the quality label is part of the video layout and
     // will be seen animating in.
-    VideoLayout.resizeVideoArea(true, false);
+    VideoLayout.resizeVideoArea();
 
     sharedVideoManager = new SharedVideoManager(eventEmitter);
 
diff --git a/modules/UI/etherpad/Etherpad.js b/modules/UI/etherpad/Etherpad.js
index 325e3249d..dd38637c9 100644
--- a/modules/UI/etherpad/Etherpad.js
+++ b/modules/UI/etherpad/Etherpad.js
@@ -120,7 +120,7 @@ class Etherpad extends LargeContainer {
 
         if (interfaceConfig.VERTICAL_FILMSTRIP) {
             height = containerHeight - getToolboxHeight();
-            width = containerWidth - Filmstrip.getFilmstripWidth();
+            width = containerWidth - Filmstrip.getVerticalFilmstripWidth();
         } else {
             height = containerHeight - Filmstrip.getFilmstripHeight();
             width = containerWidth;
diff --git a/modules/UI/shared_video/SharedVideo.js b/modules/UI/shared_video/SharedVideo.js
index 73a805e08..b8809069c 100644
--- a/modules/UI/shared_video/SharedVideo.js
+++ b/modules/UI/shared_video/SharedVideo.js
@@ -661,7 +661,7 @@ class SharedVideoContainer extends LargeContainer {
 
         if (interfaceConfig.VERTICAL_FILMSTRIP) {
             height = containerHeight - getToolboxHeight();
-            width = containerWidth - Filmstrip.getFilmstripWidth();
+            width = containerWidth - Filmstrip.getVerticalFilmstripWidth();
         } else {
             height = containerHeight - Filmstrip.getFilmstripHeight();
             width = containerWidth;
diff --git a/modules/UI/videolayout/Filmstrip.js b/modules/UI/videolayout/Filmstrip.js
index 27c23ec58..c02c5f444 100644
--- a/modules/UI/videolayout/Filmstrip.js
+++ b/modules/UI/videolayout/Filmstrip.js
@@ -1,6 +1,6 @@
 /* global $, APP, interfaceConfig */
 
-import { isFilmstripVisible } from '../../../react/features/filmstrip';
+import { getVerticalFilmstripVisibleAreaWidth, isFilmstripVisible } from '../../../react/features/filmstrip';
 
 const Filmstrip = {
     /**
@@ -19,17 +19,12 @@ const Filmstrip = {
     },
 
     /**
-     * Returns the width of filmstip
-     * @returns {number} width
+     * Returns the width of the vertical filmstip if the filmstrip is visible and 0 otherwise.
+     *
+     * @returns {number} - The width of the vertical filmstip if the filmstrip is visible and 0 otherwise.
      */
-    getFilmstripWidth() {
-        const filmstrip = $('#remoteVideos');
-
-        return isFilmstripVisible(APP.store)
-            ? filmstrip.outerWidth()
-                - parseInt(filmstrip.css('paddingLeft'), 10)
-                - parseInt(filmstrip.css('paddingRight'), 10)
-            : 0;
+    getVerticalFilmstripWidth() {
+        return isFilmstripVisible(APP.store) ? getVerticalFilmstripVisibleAreaWidth() : 0;
     },
 
     /**
diff --git a/modules/UI/videolayout/VideoContainer.js b/modules/UI/videolayout/VideoContainer.js
index 8d58d311b..7b2fa8727 100644
--- a/modules/UI/videolayout/VideoContainer.js
+++ b/modules/UI/videolayout/VideoContainer.js
@@ -46,7 +46,7 @@ function computeDesktopVideoSize( // eslint-disable-line max-params
 
     if (interfaceConfig.VERTICAL_FILMSTRIP) {
         // eslint-disable-next-line no-param-reassign
-        videoSpaceWidth -= Filmstrip.getFilmstripWidth();
+        videoSpaceWidth -= Filmstrip.getVerticalFilmstripWidth();
     } else {
         // eslint-disable-next-line no-param-reassign
         videoSpaceHeight -= Filmstrip.getFilmstripHeight();
@@ -332,7 +332,7 @@ export class VideoContainer extends LargeContainer {
         /* eslint-enable max-params */
         if (this.stream && this.isScreenSharing()) {
             if (interfaceConfig.VERTICAL_FILMSTRIP) {
-                containerWidthToUse -= Filmstrip.getFilmstripWidth();
+                containerWidthToUse -= Filmstrip.getVerticalFilmstripWidth();
             }
 
             return getCameraVideoPosition(width,
diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js
index fd7445c2d..835eaf137 100644
--- a/modules/UI/videolayout/VideoLayout.js
+++ b/modules/UI/videolayout/VideoLayout.js
@@ -542,15 +542,11 @@ const VideoLayout = {
 
     /**
      * Resizes the video area.
-     *
-     * TODO: Remove the "animate" param as it is no longer passed in as true.
-     *
-     * @param forceUpdate indicates that hidden thumbnails will be shown
      */
-    resizeVideoArea(animate = false) {
+    resizeVideoArea() {
         if (largeVideo) {
             largeVideo.updateContainerSize();
-            largeVideo.resize(animate);
+            largeVideo.resize(false);
         }
     },
 
diff --git a/react/features/filmstrip/functions.web.js b/react/features/filmstrip/functions.web.js
index bcd8fe96e..78350fee3 100644
--- a/react/features/filmstrip/functions.web.js
+++ b/react/features/filmstrip/functions.web.js
@@ -116,3 +116,20 @@ export function calculateThumbnailSizeForTileView({
         width
     };
 }
+
+/**
+ * Returns the width of the visible area (doesn't include the left margin/padding) of the the vertical filmstrip.
+ *
+ * @returns {number} - The width of the vertical filmstrip.
+ */
+export function getVerticalFilmstripVisibleAreaWidth() {
+    // Adding 11px for the 2px right margin, 2px borders on the left and right and 5px right padding.
+    // Also adding 7px for the scrollbar. Note that we are not counting the left margins and paddings because this
+    // function is used for calculating the available space and they are invisible.
+    // TODO: Check if we can remove the left margins and paddings from the CSS.
+    // FIXME: This function is used to calculate the size of the large video, etherpad or shared video. Once everything
+    // is reactified this calculation will need to move to the corresponding components.
+    const filmstripMaxWidth = (interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120) + 18;
+
+    return Math.min(filmstripMaxWidth, window.innerWidth);
+}
diff --git a/react/features/video-layout/middleware.web.js b/react/features/video-layout/middleware.web.js
index 0c68121d2..5389195a2 100644
--- a/react/features/video-layout/middleware.web.js
+++ b/react/features/video-layout/middleware.web.js
@@ -74,7 +74,7 @@ MiddlewareRegistry.register(store => next => action => {
         break;
 
     case SET_FILMSTRIP_VISIBLE:
-        VideoLayout.resizeVideoArea(true, false);
+        VideoLayout.resizeVideoArea();
         break;
 
     case TRACK_ADDED: