From 39a282fc54d063306e53142c50f5a3150a01b5b0 Mon Sep 17 00:00:00 2001
From: Simon Byford <simon.byford@guardian.co.uk>
Date: Thu, 19 Feb 2026 10:51:23 +0000
Subject: [PATCH] Move caption inside island

---
 .../components/SelfHostedVideo.importable.tsx | 16 ++++++
 .../components/SelfHostedVideoInArticle.tsx   | 56 ++++++++-----------
 2 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx b/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx
index 3ae217781aa..036e98708bb 100644
--- a/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx
@@ -8,6 +8,7 @@ import {
 	submitClickComponentEvent,
 	submitComponentEvent,
 } from '../client/ophan/ophan';
+import type { ArticleFormat } from '../lib/articleFormat';
 import { getZIndex } from '../lib/getZIndex';
 import { generateImageURL } from '../lib/image';
 import { useIsInView } from '../lib/useIsInView';
@@ -21,6 +22,7 @@ import {
 } from '../lib/video';
 import { palette } from '../palette';
 import type { VideoPlayerFormat } from '../types/mainMedia';
+import { Caption } from './Caption';
 import { CardPicture, type Props as CardPictureProps } from './CardPicture';
 import { useConfig } from './ConfigContext';
 import type {
@@ -245,6 +247,9 @@ type Props = {
 	 */
 	containerAspectRatioMobile?: number;
 	containerAspectRatioDesktop?: number;
+	caption?: string;
+	format?: ArticleFormat;
+	isMainMedia?: boolean;
 };
 
 export const SelfHostedVideo = ({
@@ -269,6 +274,9 @@ export const SelfHostedVideo = ({
 	maxAspectRatio,
 	containerAspectRatioMobile,
 	containerAspectRatioDesktop,
+	caption,
+	format,
+	isMainMedia,
 }: Props) => {
 	const adapted = useShouldAdapt();
 	const { renderingTarget } = useConfig();
@@ -806,6 +814,14 @@ export const SelfHostedVideo = ({
 					controlsPosition={controlsPosition}
 					activeCue={activeCue}
 				/>
+				{!!caption && format && (
+					<Caption
+						captionText={caption}
+						format={format}
+						isMainMedia={isMainMedia}
+						mediaType="SelfHostedVideo"
+					/>
+				)}
 			</figure>
 		</div>
 	);
diff --git a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
index 4d4766123a7..ba9980eb36c 100644
--- a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
@@ -7,7 +7,6 @@ import {
 } from '../lib/video';
 import type { MediaAtomBlockElement } from '../types/content';
 import type { VideoPlayerFormat } from '../types/mainMedia';
-import { Caption } from './Caption';
 import { Island } from './Island';
 import { SelfHostedVideo } from './SelfHostedVideo.importable';
 
@@ -33,36 +32,29 @@ export const SelfHostedVideoInArticle = ({
 	}
 
 	return (
-		<>
-			<Island priority="critical" defer={{ until: 'visible' }}>
-				<SelfHostedVideo
-					atomId={element.id}
-					fallbackImage={posterImageUrl}
-					fallbackImageAlt={caption}
-					fallbackImageAspectRatio={
-						(firstVideoAsset?.aspectRatio ?? '5:4') as FEAspectRatio
-					}
-					fallbackImageLoading="lazy"
-					fallbackImageSize="small"
-					height={firstVideoAsset?.dimensions?.height ?? 400}
-					linkTo="Article-embed-MediaAtomBlockElement"
-					posterImage={posterImageUrl}
-					sources={convertAssetsToVideoSources(element.assets)}
-					subtitleSize="medium"
-					subtitleSource={getSubtitleAsset(element.assets)}
-					videoStyle={videoStyle}
-					uniqueId={element.id}
-					width={firstVideoAsset?.dimensions?.width ?? 500}
-				/>
-			</Island>
-			{!!caption && (
-				<Caption
-					captionText={caption}
-					format={format}
-					isMainMedia={isMainMedia}
-					mediaType="SelfHostedVideo"
-				/>
-			)}
-		</>
+		<Island priority="critical" defer={{ until: 'visible' }}>
+			<SelfHostedVideo
+				atomId={element.id}
+				fallbackImage={posterImageUrl}
+				fallbackImageAlt={caption}
+				fallbackImageAspectRatio={
+					(firstVideoAsset?.aspectRatio ?? '5:4') as FEAspectRatio
+				}
+				fallbackImageLoading="lazy"
+				fallbackImageSize="small"
+				height={firstVideoAsset?.dimensions?.height ?? 400}
+				linkTo="Article-embed-MediaAtomBlockElement"
+				posterImage={posterImageUrl}
+				sources={convertAssetsToVideoSources(element.assets)}
+				subtitleSize="medium"
+				subtitleSource={getSubtitleAsset(element.assets)}
+				videoStyle={videoStyle}
+				uniqueId={element.id}
+				width={firstVideoAsset?.dimensions?.width ?? 500}
+				caption={caption}
+				format={format}
+				isMainMedia={isMainMedia}
+			/>
+		</Island>
 	);
 };