diff --git a/react/features/app/components/App.web.js b/react/features/app/components/App.web.js
index aaa8c18efc..aa3dfcc467 100644
--- a/react/features/app/components/App.web.js
+++ b/react/features/app/components/App.web.js
@@ -5,6 +5,7 @@ import '../../base/responsive-ui';
 import { getLocationContextRoot } from '../../base/util';
 import '../../chat';
 import '../../room-lock';
+import '../../video-layout';
 
 import { AbstractApp } from './AbstractApp';
 
diff --git a/react/features/video-layout/index.js b/react/features/video-layout/index.js
new file mode 100644
index 0000000000..d436892893
--- /dev/null
+++ b/react/features/video-layout/index.js
@@ -0,0 +1 @@
+import './middleware';
diff --git a/react/features/video-layout/middleware.native.js b/react/features/video-layout/middleware.native.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/react/features/video-layout/middleware.web.js b/react/features/video-layout/middleware.web.js
new file mode 100644
index 0000000000..c0930695de
--- /dev/null
+++ b/react/features/video-layout/middleware.web.js
@@ -0,0 +1,12 @@
+import { MiddlewareRegistry } from '../base/redux';
+
+/**
+ * Middleware which intercepts actions and updates the legacy component
+ * {@code VideoLayout} as needed. The purpose of this middleware is to redux-ify
+ * {@code VideoLayout} without having to simultaneously react-ifying it.
+ *
+ * @param {Store} store - The redux store.
+ * @returns {Function}
+ */
+// eslint-disable-next-line no-unused-vars
+MiddlewareRegistry.register(store => next => action => next(action));