From 96623307ed9153149ffbf86b8598dedc9852c84c Mon Sep 17 00:00:00 2001
From: Simon Byford <simon.byford@guardian.co.uk>
Date: Thu, 19 Feb 2026 12:52:10 +0000
Subject: [PATCH] Add `.element-video-immersive` to immersive videos

---
 .../src/components/SelfHostedVideo.importable.tsx          | 7 ++++++-
 .../src/components/SelfHostedVideoInArticle.tsx            | 5 ++++-
 dotcom-rendering/src/frontend/schemas/feArticle.json       | 3 +++
 dotcom-rendering/src/lib/renderElement.tsx                 | 1 +
 dotcom-rendering/src/model/block-schema.json               | 3 +++
 dotcom-rendering/src/types/content.ts                      | 1 +
 6 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx b/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx
index d813a95d7e2..f4fad2b15d5 100644
--- a/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx
@@ -20,6 +20,7 @@ import {
 	customYoutubePlayEventName,
 } from '../lib/video';
 import { palette } from '../palette';
+import type { RoleType } from '../types/content';
 import type { VideoPlayerFormat } from '../types/mainMedia';
 import { CardPicture, type Props as CardPictureProps } from './CardPicture';
 import { useConfig } from './ConfigContext';
@@ -245,6 +246,7 @@ type Props = {
 	 */
 	containerAspectRatioMobile?: number;
 	containerAspectRatioDesktop?: number;
+	role?: RoleType;
 };
 
 export const SelfHostedVideo = ({
@@ -269,6 +271,7 @@ export const SelfHostedVideo = ({
 	maxAspectRatio,
 	containerAspectRatioMobile,
 	containerAspectRatioDesktop,
+	role,
 }: Props) => {
 	const adapted = useShouldAdapt();
 	const { renderingTarget } = useConfig();
@@ -778,7 +781,9 @@ export const SelfHostedVideo = ({
 					isVideoCroppedAtLeftRight,
 					containerAspectRatioDesktop,
 				)}
-				className={`video-container ${videoStyle.toLocaleLowerCase()}`}
+				className={`video-container ${videoStyle.toLocaleLowerCase()} ${
+					role === 'immersive' ? 'element-video-immersive' : ''
+				}`}
 				data-component="gu-video-loop"
 			>
 				<SelfHostedVideoPlayer
diff --git a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
index 4d4766123a7..d51cdbe04c9 100644
--- a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
@@ -5,7 +5,7 @@ import {
 	getFirstVideoAsset,
 	getSubtitleAsset,
 } from '../lib/video';
-import type { MediaAtomBlockElement } from '../types/content';
+import type { MediaAtomBlockElement, RoleType } from '../types/content';
 import type { VideoPlayerFormat } from '../types/mainMedia';
 import { Caption } from './Caption';
 import { Island } from './Island';
@@ -16,6 +16,7 @@ type SelfHostedVideoInArticleProps = {
 	format: ArticleFormat;
 	isMainMedia: boolean;
 	videoStyle: VideoPlayerFormat;
+	role?: RoleType;
 };
 
 export const SelfHostedVideoInArticle = ({
@@ -23,6 +24,7 @@ export const SelfHostedVideoInArticle = ({
 	format,
 	isMainMedia,
 	videoStyle,
+	role = 'inline',
 }: SelfHostedVideoInArticleProps) => {
 	const posterImageUrl = element.posterImage?.[0]?.url;
 	const caption = element.title;
@@ -53,6 +55,7 @@ export const SelfHostedVideoInArticle = ({
 					videoStyle={videoStyle}
 					uniqueId={element.id}
 					width={firstVideoAsset?.dimensions?.width ?? 500}
+					role={role}
 				/>
 			</Island>
 			{!!caption && (
diff --git a/dotcom-rendering/src/frontend/schemas/feArticle.json b/dotcom-rendering/src/frontend/schemas/feArticle.json
index 08f14d53b63..a450499a768 100644
--- a/dotcom-rendering/src/frontend/schemas/feArticle.json
+++ b/dotcom-rendering/src/frontend/schemas/feArticle.json
@@ -2809,6 +2809,9 @@
                 },
                 "videoPlayerFormat": {
                     "$ref": "#/definitions/VideoPlayerFormat"
+                },
+                "role": {
+                    "$ref": "#/definitions/RoleType"
                 }
             },
             "required": [
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
index 4c7ae4fa39d..274112ef069 100644
--- a/dotcom-rendering/src/lib/renderElement.tsx
+++ b/dotcom-rendering/src/lib/renderElement.tsx
@@ -513,6 +513,7 @@ export const renderElement = ({
 						format={format}
 						isMainMedia={isMainMedia}
 						videoStyle={element.videoPlayerFormat}
+						role={element.role}
 					/>
 				);
 			} else {
diff --git a/dotcom-rendering/src/model/block-schema.json b/dotcom-rendering/src/model/block-schema.json
index 0dd52dbda7d..bc0fefc4daa 100644
--- a/dotcom-rendering/src/model/block-schema.json
+++ b/dotcom-rendering/src/model/block-schema.json
@@ -2297,6 +2297,9 @@
                 },
                 "videoPlayerFormat": {
                     "$ref": "#/definitions/VideoPlayerFormat"
+                },
+                "role": {
+                    "$ref": "#/definitions/RoleType"
                 }
             },
             "required": [
diff --git a/dotcom-rendering/src/types/content.ts b/dotcom-rendering/src/types/content.ts
index 721ef37ae90..fc516224204 100644
--- a/dotcom-rendering/src/types/content.ts
+++ b/dotcom-rendering/src/types/content.ts
@@ -456,6 +456,7 @@ export interface MediaAtomBlockElement {
 	title?: string;
 	duration?: number;
 	videoPlayerFormat?: VideoPlayerFormat;
+	role?: RoleType;
 }
 
 export interface MultiImageBlockElement {