Add .element-video-immersive to immersive self-hosted videos

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

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,13 +16,15 @@ type SelfHostedVideoInArticleProps = {
 	format: ArticleFormat;
 	isMainMedia: boolean;
 	videoStyle: VideoPlayerFormat;
+	role?: RoleType;
 };
 
 export const SelfHostedVideoInArticle = ({
 	element,
 	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 && (

dotcom-rendering/src/frontend/schemas/feArticle.json

@@ -2809,6 +2809,9 @@
                 },
                 "videoPlayerFormat": {
                     "$ref": "#/definitions/VideoPlayerFormat"
+                },
+                "role": {
+                    "$ref": "#/definitions/RoleType"
                 }
             },
             "required": [

dotcom-rendering/src/lib/renderElement.tsx

@@ -513,6 +513,7 @@ export const renderElement = ({
 						format={format}
 						isMainMedia={isMainMedia}
 						videoStyle={element.videoPlayerFormat}
+						role={element.role}
 					/>
 				);
 			} else {

dotcom-rendering/src/model/block-schema.json

@@ -2297,6 +2297,9 @@
                 },
                 "videoPlayerFormat": {
                     "$ref": "#/definitions/VideoPlayerFormat"
+                },
+                "role": {
+                    "$ref": "#/definitions/RoleType"
                 }
             },
             "required": [

dotcom-rendering/src/types/content.ts

@@ -456,6 +456,7 @@ export interface MediaAtomBlockElement {
 	title?: string;
 	duration?: number;
 	videoPlayerFormat?: VideoPlayerFormat;
+	role?: RoleType;
 }
 
 export interface MultiImageBlockElement {