From e90ae5b180e7e20b18c830a6833228f9e98216f5 Mon Sep 17 00:00:00 2001
From: Simon Byford <simon.byford@guardian.co.uk>
Date: Thu, 22 Jan 2026 16:36:18 +0000
Subject: [PATCH] Don't show pointer cursor for Cinemagraphs

---
 .../src/components/SelfHostedVideoPlayer.tsx       | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
index 86624691e73..39a90be7907 100644
--- a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
@@ -23,12 +23,15 @@ import { VideoProgressBar } from './VideoProgressBar';
 
 export type SubtitleSize = 'small' | 'medium' | 'large';
 
-const videoStyles = (aspectRatio: number) => css`
+const videoStyles = (aspectRatio: number, isCinemagraph: boolean) => css`
 	position: relative;
 	display: block;
 	height: auto;
 	width: 100%;
-	cursor: pointer;
+	${!isCinemagraph &&
+	css`
+		cursor: pointer;
+	`}
 
 	/* Prevents CLS by letting the browser know the space the video will take up. */
 	aspect-ratio: ${aspectRatio};
@@ -171,12 +174,13 @@ export const SelfHostedVideoPlayer = forwardRef(
 		}: Props,
 		ref: React.ForwardedRef<HTMLVideoElement>,
 	) => {
+		const isCinemagraph = videoStyle === 'Cinemagraph';
 		const videoId = `video-${uniqueId}`;
 		const showSubtitles =
-			videoStyle !== 'Cinemagraph' && !!subtitleSource && !!subtitleSize;
+			!isCinemagraph && !!subtitleSource && !!subtitleSize;
 
 		const showControls =
-			videoStyle !== 'Cinemagraph' &&
+			!isCinemagraph &&
 			ref &&
 			'current' in ref &&
 			ref.current &&
@@ -194,7 +198,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 				<video
 					id={videoId}
 					css={[
-						videoStyles(aspectRatio),
+						videoStyles(aspectRatio, isCinemagraph),
 						showSubtitles && subtitleStyles(subtitleSize),
 					]}
 					crossOrigin="anonymous"