diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts
index 71c774689..357991179 100644
--- a/frontend/src/bundles/common/components/components.ts
+++ b/frontend/src/bundles/common/components/components.ts
@@ -3,6 +3,7 @@ export { Input } from './input/input.js';
 export { Link } from './link/link.js';
 export { Loader } from './loader/loader.js';
 export { Overlay } from './overlay/overlay.js';
+export { Player } from './player/player.js';
 export { RouterProvider } from './router-provider/router-provider.js';
 export {
     Box,
diff --git a/frontend/src/bundles/common/components/player/player.tsx b/frontend/src/bundles/common/components/player/player.tsx
new file mode 100644
index 000000000..1f5e41425
--- /dev/null
+++ b/frontend/src/bundles/common/components/player/player.tsx
@@ -0,0 +1,48 @@
+import { type PlayerRef, Player as LibraryPlayer } from '@remotion/player';
+import { type RefObject } from 'react';
+
+import { Box } from '~/bundles/common/components/components.js';
+
+type Properties = {
+    orientation: 'landscape' | 'portrait';
+    durationInFrames: number;
+    playerRef: RefObject<PlayerRef>;
+    VideoComponent: React.FC;
+};
+
+const Player = ({
+    orientation,
+    durationInFrames,
+    playerRef,
+    VideoComponent,
+}: Properties): JSX.Element => {
+    const size =
+        orientation === 'landscape'
+            ? { width: 1920, height: 1080 }
+            : { width: 1080, height: 1920 };
+
+    return (
+        <Box
+            height="720px"
+            width="fit-content"
+            maxWidth="100%"
+            overflow="hidden"
+            border="1px solid #FDFDFD"
+        >
+            <LibraryPlayer
+                ref={playerRef}
+                component={VideoComponent}
+                durationInFrames={durationInFrames}
+                compositionWidth={size.width}
+                compositionHeight={size.height}
+                fps={30}
+                style={{
+                    height: '100%',
+                    maxWidth: '100%',
+                }}
+            />
+        </Box>
+    );
+};
+
+export { Player };