From cbe96ae45448ee6a55f50e2507d3355db34447da Mon Sep 17 00:00:00 2001
From: Simon Byford <simon.byford@guardian.co.uk>
Date: Tue, 20 Jan 2026 13:50:31 +0000
Subject: [PATCH 1/2] letterboxed -> !isInArticle

---
 dotcom-rendering/src/components/Card/Card.tsx   |  1 -
 .../components/SelfHostedVideo.importable.tsx   | 17 +++++++++++------
 .../src/components/SelfHostedVideoInArticle.tsx |  1 +
 .../src/components/SelfHostedVideoPlayer.tsx    | 16 +++++++++++-----
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index bcdf1a83238..10b1efe2f41 100644
--- a/dotcom-rendering/src/components/Card/Card.tsx
+++ b/dotcom-rendering/src/components/Card/Card.tsx
@@ -1081,7 +1081,6 @@ export const Card = ({
 										media.mainMedia.subtitleSource
 									}
 									subtitleSize={subtitleSize}
-									letterboxed={true}
 								/>
 							</Island>
 						)}
diff --git a/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx b/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx
index 303a221ba55..9fa23f8222b 100644
--- a/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx
@@ -57,7 +57,7 @@ const videoContainerStyles = (
 
 const figureStyles = (
 	aspectRatio: number,
-	letterboxed: boolean,
+	isInArticle: boolean,
 	containerAspectRatio?: number,
 	isFeatureCard?: boolean,
 ) => css`
@@ -65,7 +65,12 @@ const figureStyles = (
 	aspect-ratio: ${aspectRatio};
 	height: 100%;
 
-	${letterboxed &&
+	/**
+	 * Videos on cards (i.e. not in articles) should not exceed the viewport
+	 * height. Instead, they should be scaled and grey bars should be shown on
+	 * either side.
+	 */
+	${!isInArticle &&
 	css`
 		max-height: 100vh;
 		max-height: 100svh;
@@ -166,7 +171,7 @@ type Props = {
 	linkTo: string;
 	subtitleSource?: string;
 	subtitleSize: SubtitleSize;
-	letterboxed?: boolean;
+	isInArticle?: boolean;
 	isFeatureCard?: boolean;
 };
 
@@ -187,7 +192,7 @@ export const SelfHostedVideo = ({
 	linkTo,
 	subtitleSource,
 	subtitleSize,
-	letterboxed = false,
+	isInArticle = false,
 	isFeatureCard = false,
 }: Props) => {
 	const adapted = useShouldAdapt();
@@ -720,7 +725,7 @@ export const SelfHostedVideo = ({
 				ref={setNode}
 				css={figureStyles(
 					aspectRatio,
-					letterboxed,
+					isInArticle,
 					containerAspectRatio,
 					isFeatureCard,
 				)}
@@ -756,7 +761,7 @@ export const SelfHostedVideo = ({
 					subtitleSource={subtitleSource}
 					subtitleSize={subtitleSize}
 					activeCue={activeCue}
-					letterboxed={letterboxed}
+					isInArticle={isInArticle}
 					isFeatureCard={isFeatureCard}
 				/>
 			</figure>
diff --git a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
index f0b4563587b..1007cddaf7d 100644
--- a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
@@ -65,6 +65,7 @@ export const SelfHostedVideoInArticle = ({
 					videoStyle={videoStyle}
 					uniqueId={element.id}
 					width={firstVideoAsset?.dimensions?.width ?? 500}
+					isInArticle={true}
 				/>
 			</Island>
 			{!!caption && (
diff --git a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
index 5b4d6baeec0..69f61fbe5fa 100644
--- a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
@@ -25,14 +25,20 @@ export type SubtitleSize = 'small' | 'medium' | 'large';
 
 const videoStyles = (
 	aspectRatio: number,
-	letterboxed: boolean,
+	isInArticle: boolean,
 	isFeatureCard: boolean,
+	isCinemagraph: boolean,
 ) => css`
 	position: relative;
 	display: block;
 	height: auto;
 	width: 100%;
-	${letterboxed &&
+	/**
+	 * Videos on cards (i.e. not in articles) should not exceed the viewport
+	 * height. Instead, they should be scaled and grey bars should be shown on
+	 * either side.
+	 */
+	${!isInArticle &&
 	css`
 		max-height: 100vh;
 		max-height: 100svh;
@@ -139,7 +145,7 @@ type Props = {
 	subtitleSize?: SubtitleSize;
 	/* used in custom subtitle overlays */
 	activeCue?: ActiveCue | null;
-	letterboxed: boolean;
+	isInArticle: boolean;
 	isFeatureCard: boolean;
 };
 
@@ -182,7 +188,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 			subtitleSource,
 			subtitleSize,
 			activeCue,
-			letterboxed,
+			isInArticle,
 			isFeatureCard,
 		}: Props,
 		ref: React.ForwardedRef<HTMLVideoElement>,
@@ -210,7 +216,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 				<video
 					id={videoId}
 					css={[
-						videoStyles(aspectRatio, letterboxed, isFeatureCard),
+						videoStyles(aspectRatio, isInArticle, isFeatureCard),
 						showSubtitles && subtitleStyles(subtitleSize),
 					]}
 					crossOrigin="anonymous"

From 5ea9fbc4d1cd5910836431466673b9c8a5ada16a Mon Sep 17 00:00:00 2001
From: Simon Byford <simon.byford@guardian.co.uk>
Date: Tue, 20 Jan 2026 13:52:41 +0000
Subject: [PATCH 2/2] Don't show pointer when Cinemagraph is in article

---
 .../src/components/SelfHostedVideoPlayer.tsx  | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
index 69f61fbe5fa..3613db9450e 100644
--- a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
@@ -43,7 +43,12 @@ const videoStyles = (
 		max-height: 100vh;
 		max-height: 100svh;
 	`}
-	cursor: pointer;
+	/**
+	 * Cinemagraphs should only show a pointer cursor when on a card (where clicking
+	 * navigates to the article). In articles, they should not show a pointer cursor
+	 * as clicking does nothing.
+	 */
+	cursor: ${isCinemagraph && isInArticle ? 'default' : 'pointer'};
 
 	/* Prevents CLS by letting the browser know the space the video will take up. */
 	aspect-ratio: ${aspectRatio};
@@ -194,11 +199,12 @@ export const SelfHostedVideoPlayer = forwardRef(
 		ref: React.ForwardedRef<HTMLVideoElement>,
 	) => {
 		const videoId = `video-${uniqueId}`;
+		const isCinemagraph = videoStyle === 'Cinemagraph';
 		const showSubtitles =
-			videoStyle !== 'Cinemagraph' && !!subtitleSource && !!subtitleSize;
+			!isCinemagraph && !!subtitleSource && !!subtitleSize;
 
 		const showControls =
-			videoStyle !== 'Cinemagraph' &&
+			!isCinemagraph &&
 			ref &&
 			'current' in ref &&
 			ref.current &&
@@ -216,7 +222,12 @@ export const SelfHostedVideoPlayer = forwardRef(
 				<video
 					id={videoId}
 					css={[
-						videoStyles(aspectRatio, isInArticle, isFeatureCard),
+						videoStyles(
+							aspectRatio,
+							isInArticle,
+							isFeatureCard,
+							isCinemagraph,
+						),
 						showSubtitles && subtitleStyles(subtitleSize),
 					]}
 					crossOrigin="anonymous"