From 2d154e16ca961e435d51ee3086fdd526498e1c83 Mon Sep 17 00:00:00 2001
From: Dominik Lander <dominik.lander@guardian.co.uk>
Date: Wed, 22 Apr 2026 14:17:46 +0100
Subject: [PATCH 1/2] refactor controls position type

---
 .../src/components/SelfHostedVideo.island.tsx             | 5 +++--
 dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx | 8 ++++----
 .../src/components/SelfHostedVideoPlayerIcons.tsx         | 3 ---
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/dotcom-rendering/src/components/SelfHostedVideo.island.tsx b/dotcom-rendering/src/components/SelfHostedVideo.island.tsx
index f613b4778cb..c89b626dc25 100644
--- a/dotcom-rendering/src/components/SelfHostedVideo.island.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideo.island.tsx
@@ -31,6 +31,7 @@ import { Caption } from './Caption';
 import { CardPicture, type Props as CardPictureProps } from './CardPicture';
 import { useConfig } from './ConfigContext';
 import type {
+	ControlsPosition,
 	PLAYER_STATES,
 	PlayerStates,
 	SubtitleSize,
@@ -297,7 +298,7 @@ type Props = {
 	/**
 	 * The position of subtitles and the audio icon.
 	 */
-	controlsPosition?: 'top' | 'bottom';
+	controlsPosition?: ControlsPosition;
 	/**
 	 * The minimum/maximum aspect ratio the video will have. The video will be cropped if this
 	 * value is defined and the video aspect ratio is less/greater than this value.
@@ -965,7 +966,7 @@ export const SelfHostedVideo = ({
 						subtitleSource={subtitleSource}
 						subtitleSize={subtitleSize}
 						showIcons={showIcons}
-						controlsPosition={controlsPosition}
+						iconsPosition={controlsPosition}
 						subtitlesPosition={subtitlesPosition}
 						activeCue={activeCue}
 						shouldLoop={shouldLoop}
diff --git a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
index c7902a2bb4e..e2e350e75c4 100644
--- a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
@@ -140,7 +140,7 @@ export type Props = {
 	activeCue?: ActiveCue | null;
 	shouldLoop: boolean;
 	isInteractive: boolean;
-	controlsPosition: ControlsPosition;
+	iconsPosition: ControlsPosition;
 	subtitlesPosition: SubtitlesPosition;
 };
 
@@ -193,7 +193,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 			activeCue,
 			shouldLoop,
 			isInteractive,
-			controlsPosition,
+			iconsPosition,
 			subtitlesPosition,
 		}: Props,
 		ref: React.ForwardedRef<HTMLVideoElement>,
@@ -302,9 +302,9 @@ export const SelfHostedVideoPlayer = forwardRef(
 						css={[
 							iconsContainerStyles,
 							iconSize === 'large' &&
-								largeIconsPositionStyles(controlsPosition),
+								largeIconsPositionStyles(iconsPosition),
 							iconSize === 'small' &&
-								smallIconsPositionStyles(controlsPosition),
+								smallIconsPositionStyles(iconsPosition),
 						]}
 					>
 						{showFullscreenIcon && (
diff --git a/dotcom-rendering/src/components/SelfHostedVideoPlayerIcons.tsx b/dotcom-rendering/src/components/SelfHostedVideoPlayerIcons.tsx
index 44059181bee..2be6f4b5816 100644
--- a/dotcom-rendering/src/components/SelfHostedVideoPlayerIcons.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoPlayerIcons.tsx
@@ -4,9 +4,6 @@ import { SvgArrowExpand } from '@guardian/source/react-components';
 import { palette } from '../palette';
 import type { Props as SelfHostedVideoPlayerProps } from './SelfHostedVideoPlayer';
 
-export type SubtitleSize = 'small' | 'medium' | 'large';
-export type ControlsPosition = 'top' | 'bottom';
-
 const buttonStyles = css`
 	border: none;
 	background: none;

From eee51967036114c2cb814a5a3dcd4717b8d06fda Mon Sep 17 00:00:00 2001
From: Dominik Lander <dominik.lander@guardian.co.uk>
Date: Wed, 22 Apr 2026 14:17:56 +0100
Subject: [PATCH 2/2] Invert bool for story

---
 dotcom-rendering/src/components/SelfHostedVideo.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dotcom-rendering/src/components/SelfHostedVideo.stories.tsx b/dotcom-rendering/src/components/SelfHostedVideo.stories.tsx
index 45deca27b9d..98a52a02dd7 100644
--- a/dotcom-rendering/src/components/SelfHostedVideo.stories.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideo.stories.tsx
@@ -73,7 +73,7 @@ export const Default: Story = {
 export const WithoutProgressBar: Story = {
 	args: {
 		...Loop.args,
-		hideProgressBar: false,
+		hideProgressBar: true,
 	},
 } satisfies Story;