diff --git a/css/filmstrip/_vertical_filmstrip.scss b/css/filmstrip/_vertical_filmstrip.scss
index 9861cb73e1a..bd64ee7c0e8 100644
--- a/css/filmstrip/_vertical_filmstrip.scss
+++ b/css/filmstrip/_vertical_filmstrip.scss
@@ -127,7 +127,7 @@
 /**
  * Override other styles to support vertical filmstrip mode.
  */
-.vertical-filmstrip.filmstrip-only {
+.filmstrip-only .vertical-filmstrip {
     .filmstrip {
         flex-direction: row-reverse;
     }
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index 01d236f1a2d..310d4acc2a1 100644
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@@ -320,11 +320,6 @@ UI.start = function() {
         SidePanels.init(eventEmitter);
     }
 
-    const filmstripTypeClassname = interfaceConfig.VERTICAL_FILMSTRIP
-        ? 'vertical-filmstrip' : 'horizontal-filmstrip';
-
-    $('body').addClass(filmstripTypeClassname);
-
     document.title = interfaceConfig.APP_NAME;
 };
 
diff --git a/react/features/conference/components/Conference.web.js b/react/features/conference/components/Conference.web.js
index 5a3cc838e9e..b78c15c6208 100644
--- a/react/features/conference/components/Conference.web.js
+++ b/react/features/conference/components/Conference.web.js
@@ -42,6 +42,18 @@ const FULL_SCREEN_EVENTS = [
     'fullscreenchange'
 ];
 
+/**
+ * The CSS class to apply to the root element of the conference so CSS can
+ * modify the app layout.
+ *
+ * @private
+ * @type {Object}
+ */
+const LAYOUT_CLASSES = {
+    HORIZONTAL_FILMSTRIP: 'horizontal-filmstrip',
+    VERTICAL_FILMSTRIP: 'vertical-filmstrip'
+};
+
 /**
  * The type of the React {@code Component} props of {@link Conference}.
  */
@@ -52,6 +64,12 @@ type Props = {
      */
     _iAmRecorder: boolean,
 
+    /**
+     * The CSS class to apply to the root of {@link Conference} to modify the
+     * application layout.
+     */
+    _layoutModeClassName: string,
+
     /**
      * Conference room name.
      */
@@ -162,6 +180,7 @@ class Conference extends Component<Props> {
 
         return (
             <div
+                className = { this.props._layoutModeClassName }
                 id = 'videoconference_page'
                 onMouseMove = { this._onShowToolbar }>
                 <Notice />
@@ -253,6 +272,10 @@ function _mapStateToProps(state) {
          */
         _iAmRecorder: iAmRecorder,
 
+        _layoutModeClassName: interfaceConfig.VERTICAL_FILMSTRIP
+            ? LAYOUT_CLASSES.VERTICAL_FILMSTRIP
+            : LAYOUT_CLASSES.HORIZONTAL_FILMSTRIP,
+
         /**
          * Conference room name.
          */