From deb901f338721bbfa320dfa074f02347ef1bd68a Mon Sep 17 00:00:00 2001
From: Rik Roots <rik.roots@guardian.co.uk>
Date: Thu, 16 Apr 2026 10:03:10 +0100
Subject: [PATCH 01/11] Update ContentAtomBlockElement to include caption field

---
 dotcom-rendering/src/frontend/schemas/feArticle.json | 3 +++
 dotcom-rendering/src/model/block-schema.json         | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/dotcom-rendering/src/frontend/schemas/feArticle.json b/dotcom-rendering/src/frontend/schemas/feArticle.json
index 777dfd17431..bcae1c444c9 100644
--- a/dotcom-rendering/src/frontend/schemas/feArticle.json
+++ b/dotcom-rendering/src/frontend/schemas/feArticle.json
@@ -1914,6 +1914,9 @@
                 },
                 "atomId": {
                     "type": "string"
+                },
+                "caption": {
+                    "type": "string"
                 }
             },
             "required": [
diff --git a/dotcom-rendering/src/model/block-schema.json b/dotcom-rendering/src/model/block-schema.json
index 9dfcdcb8629..196176cd3b0 100644
--- a/dotcom-rendering/src/model/block-schema.json
+++ b/dotcom-rendering/src/model/block-schema.json
@@ -1387,6 +1387,9 @@
                 },
                 "atomId": {
                     "type": "string"
+                },
+                "caption": {
+                    "type": "string"
                 }
             },
             "required": [

From 32f2a0d04f7453452a7d8b3e841bff1a8d688398 Mon Sep 17 00:00:00 2001
From: Rik Roots <rik.roots@guardian.co.uk>
Date: Thu, 16 Apr 2026 10:20:28 +0100
Subject: [PATCH 02/11] Regenerate schemas

---
 dotcom-rendering/src/frontend/schemas/feArticle.json | 3 ---
 dotcom-rendering/src/model/block-schema.json         | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/dotcom-rendering/src/frontend/schemas/feArticle.json b/dotcom-rendering/src/frontend/schemas/feArticle.json
index bcae1c444c9..777dfd17431 100644
--- a/dotcom-rendering/src/frontend/schemas/feArticle.json
+++ b/dotcom-rendering/src/frontend/schemas/feArticle.json
@@ -1914,9 +1914,6 @@
                 },
                 "atomId": {
                     "type": "string"
-                },
-                "caption": {
-                    "type": "string"
                 }
             },
             "required": [
diff --git a/dotcom-rendering/src/model/block-schema.json b/dotcom-rendering/src/model/block-schema.json
index 196176cd3b0..9dfcdcb8629 100644
--- a/dotcom-rendering/src/model/block-schema.json
+++ b/dotcom-rendering/src/model/block-schema.json
@@ -1387,9 +1387,6 @@
                 },
                 "atomId": {
                     "type": "string"
-                },
-                "caption": {
-                    "type": "string"
                 }
             },
             "required": [

From a7cd14adb45ebc380c481cfa089d11771654109a Mon Sep 17 00:00:00 2001
From: Rik Roots <rik.roots@guardian.co.uk>
Date: Thu, 16 Apr 2026 10:47:01 +0100
Subject: [PATCH 03/11] Update ContentAtomBlockElement to include caption field

---
 dotcom-rendering/src/types/content.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/dotcom-rendering/src/types/content.ts b/dotcom-rendering/src/types/content.ts
index 03cffb278ef..7662a8a64cd 100644
--- a/dotcom-rendering/src/types/content.ts
+++ b/dotcom-rendering/src/types/content.ts
@@ -213,6 +213,7 @@ export interface ContentAtomBlockElement {
 	_type: 'model.dotcomrendering.pageElements.ContentAtomBlockElement';
 	elementId: string;
 	atomId: string;
+	caption?: string;
 }
 
 interface DisclaimerBlockElement {

From 86b6cede32c0cde1d05b49767b9a9c90dd27c3ac Mon Sep 17 00:00:00 2001
From: Rik Roots <rik.roots@guardian.co.uk>
Date: Thu, 16 Apr 2026 10:50:07 +0100
Subject: [PATCH 04/11] Regenerate schemas

---
 dotcom-rendering/src/frontend/schemas/feArticle.json | 3 +++
 dotcom-rendering/src/model/block-schema.json         | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/dotcom-rendering/src/frontend/schemas/feArticle.json b/dotcom-rendering/src/frontend/schemas/feArticle.json
index 777dfd17431..bcae1c444c9 100644
--- a/dotcom-rendering/src/frontend/schemas/feArticle.json
+++ b/dotcom-rendering/src/frontend/schemas/feArticle.json
@@ -1914,6 +1914,9 @@
                 },
                 "atomId": {
                     "type": "string"
+                },
+                "caption": {
+                    "type": "string"
                 }
             },
             "required": [
diff --git a/dotcom-rendering/src/model/block-schema.json b/dotcom-rendering/src/model/block-schema.json
index 9dfcdcb8629..196176cd3b0 100644
--- a/dotcom-rendering/src/model/block-schema.json
+++ b/dotcom-rendering/src/model/block-schema.json
@@ -1387,6 +1387,9 @@
                 },
                 "atomId": {
                     "type": "string"
+                },
+                "caption": {
+                    "type": "string"
                 }
             },
             "required": [

From 62f9ece57321a23ef974ebe9e2bb61df4f55b6b0 Mon Sep 17 00:00:00 2001
From: Rik Roots <rik.roots@guardian.co.uk>
Date: Tue, 21 Apr 2026 12:03:15 +0100
Subject: [PATCH 05/11] Consider where work needs to be done to implement
 feature

---
 dotcom-rendering/src/components/Caption.tsx            |  1 +
 .../src/components/SelfHostedVideoPlayer.tsx           |  2 ++
 dotcom-rendering/src/lib/renderElement.tsx             |  8 ++++++++
 dotcom-rendering/src/lib/video.ts                      |  2 ++
 dotcom-rendering/src/types/content.ts                  | 10 ++++++++++
 dotcom-rendering/src/types/mainMedia.ts                |  2 ++
 6 files changed, 25 insertions(+)

diff --git a/dotcom-rendering/src/components/Caption.tsx b/dotcom-rendering/src/components/Caption.tsx
index 536aea4105e..590c65f183a 100644
--- a/dotcom-rendering/src/components/Caption.tsx
+++ b/dotcom-rendering/src/components/Caption.tsx
@@ -1,3 +1,4 @@
+// DEV NOTE: at this point, we should be supplying the component with `captionText` - decisions about what that string should be should have taken place before this point
 import { css } from '@emotion/react';
 import {
 	between,
diff --git a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
index 0727c28f3fd..4d718d39f3f 100644
--- a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
@@ -1,3 +1,5 @@
+// DEV NOTE: by this point, captions text should be settled - this component doesn't care about it
+
 import { css } from '@emotion/react';
 import {
 	space,
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
index cdfc0982545..931e7201cf6 100644
--- a/dotcom-rendering/src/lib/renderElement.tsx
+++ b/dotcom-rendering/src/lib/renderElement.tsx
@@ -372,6 +372,7 @@ export const renderElement = ({
 				</Island>
 			);
 		case 'model.dotcomrendering.pageElements.GuVideoBlockElement':
+			// DEV NOTE: makes use of `credit` and `caption` attribute data
 			return (
 				<GuVideoBlockComponent
 					html={element.html}
@@ -514,6 +515,9 @@ export const renderElement = ({
 					/>
 				);
 			} else {
+				// DEV NOTE: It's at this point where `title` attribute content gets set to `caption` attribute
+				// - add in a check to override title with our new caption at this point
+				// - but we need to make sure that the `caption` attribute gets fed down the chain to this point
 				return (
 					<VideoAtom
 						format={format}
@@ -827,6 +831,7 @@ export const renderElement = ({
 			}
 			return <TweetBlockComponent element={element} />;
 		case 'model.dotcomrendering.pageElements.VideoFacebookBlockElement':
+			// DEV NOTE: ignoring FaceBook video for now
 			return (
 				<Island priority="feature" defer={{ until: 'visible' }}>
 					<VideoFacebookBlockComponent
@@ -846,6 +851,7 @@ export const renderElement = ({
 				</Island>
 			);
 		case 'model.dotcomrendering.pageElements.VideoVimeoBlockElement':
+			// DEV NOTE: ignoring Vimeo video for now
 			return (
 				<VimeoBlockComponent
 					format={format}
@@ -860,6 +866,7 @@ export const renderElement = ({
 			);
 		case 'model.dotcomrendering.pageElements.VideoYoutubeBlockElement':
 			return (
+				// DEV NOTE: the `caption`, `credit` and `title` attributes are being passed down to YoutubeEmbedBlockComponent
 				<YoutubeEmbedBlockComponent
 					format={format}
 					embedUrl={element.embedUrl}
@@ -910,6 +917,7 @@ export const renderElement = ({
 						youtubeHtml,
 						dateCreated,
 					} = element.witnessTypeData;
+					// DEV NOTE: ignoring Witness-related video for now
 					return (
 						<WitnessVideoBlockComponent
 							title={title}
diff --git a/dotcom-rendering/src/lib/video.ts b/dotcom-rendering/src/lib/video.ts
index 645444315aa..e71bf074431 100644
--- a/dotcom-rendering/src/lib/video.ts
+++ b/dotcom-rendering/src/lib/video.ts
@@ -1,3 +1,5 @@
+// DEV NOTE - there's nothing in this file which seems to interact with `title` or `caption` attribute data
+
 import type { FEMediaAsset } from '../frontend/feFront';
 import type { VideoAssets } from '../types/content';
 
diff --git a/dotcom-rendering/src/types/content.ts b/dotcom-rendering/src/types/content.ts
index 7662a8a64cd..6c2df1a7416 100644
--- a/dotcom-rendering/src/types/content.ts
+++ b/dotcom-rendering/src/types/content.ts
@@ -288,6 +288,8 @@ export interface GuVideoBlockElement {
 	_type: 'model.dotcomrendering.pageElements.GuVideoBlockElement';
 	elementId: string;
 	assets: VideoAssets[];
+	// DEV NOTE: the `caption` field appears in the VideoAssets object, and again here - Q: are they the same data?
+	// - `model/block-schema.json` marks this `caption` attribute as required, but the VideoAssets version is optional
 	caption: string;
 	html: string;
 	source: string;
@@ -466,6 +468,8 @@ export interface MediaAtomBlockElement {
 		url: string;
 		width: number;
 	}[];
+	// DEV NOTE: the `caption` field appears in the VideoAssets object. MediaAtomBlockElement also supplies a `title` attribute, which possibly comes from MAM?
+	// - `model/block-schema.json` marks this `title` attribute as optional; the VideoAssets `caption` attribute is also optional
 	title?: string;
 	duration?: number;
 	videoPlayerFormat?: VideoPlayerFormat;
@@ -704,6 +708,7 @@ export interface VideoFacebookBlockElement extends ThirdPartyEmbeddedContent {
 	url: string;
 	height: number;
 	width: number;
+	// DEV NOTE - ignoring this for now, think FaceBook is legacy only
 	caption?: string;
 	embedUrl?: string;
 	role?: RoleType;
@@ -716,6 +721,7 @@ export interface VideoVimeoBlockElement extends ThirdPartyEmbeddedContent {
 	url: string;
 	height: number;
 	width: number;
+	// DEV NOTE - ignoring this for now, think Vimeo is legacy only - interesting that it comes with both `title`, `caption` and `credit` attributes!
 	caption?: string;
 	credit?: string;
 	title?: string;
@@ -731,6 +737,7 @@ export interface VideoYoutubeBlockElement extends ThirdPartyEmbeddedContent {
 	originalUrl: string;
 	height: number;
 	width: number;
+	// DEV NOTE - ignoring this for now - given we also have a YoutubeBlockElement, which is the preferred method for embedding YT videos in articles? - interesting that it comes with both `title`, `caption` and `credit` attributes!
 	caption?: string;
 	credit?: string;
 	title?: string;
@@ -740,6 +747,7 @@ export interface VideoYoutubeBlockElement extends ThirdPartyEmbeddedContent {
 export interface YoutubeBlockElement {
 	_type: 'model.dotcomrendering.pageElements.YoutubeBlockElement';
 	assetId: string;
+	// DEV NOTE - the element comes with `mediaTitle` (?) and `altText` attributes - pretty sure altText is for the poster image
 	mediaTitle: string;
 	id: string;
 	elementId: string;
@@ -789,6 +797,7 @@ interface WitnessTypeDataVideo extends WitnessTypeDataBase {
 	youtubeSource: string;
 	youtubeAuthorName: string;
 	height: number;
+	// DEV NOTE - ignoring for now, as I think "witness" is deep legacy stuff. Includes `youtubeDescription` and `youtubeTitle` attributes
 	youtubeTitle: string;
 }
 
@@ -1000,6 +1009,7 @@ export interface VideoAssets {
 		embeddable?: string;
 		height?: string;
 		width?: string;
+		// DEV NOTE: the `caption` field appears in the VideoAssets object
 		caption?: string;
 	};
 	hasAudio?: boolean;
diff --git a/dotcom-rendering/src/types/mainMedia.ts b/dotcom-rendering/src/types/mainMedia.ts
index 3a077b04d59..f34aa63b88c 100644
--- a/dotcom-rendering/src/types/mainMedia.ts
+++ b/dotcom-rendering/src/types/mainMedia.ts
@@ -16,6 +16,7 @@ export type YoutubeVideo = Media & {
 	height: number;
 	width: number;
 	origin: string;
+	// DEV NOTE: YouTube video typing here includes a `title` attribute, but no `caption` attribute
 	title: string;
 	duration: number;
 	expired: boolean;
@@ -23,6 +24,7 @@ export type YoutubeVideo = Media & {
 	isLive?: boolean;
 };
 
+// DEV NOTE: self-hosted videos typing here gives no indication of either `title` or `caption` attributes
 type SelfHostedVideo = Media & {
 	type: 'SelfHostedVideo';
 	videoStyle: VideoPlayerFormat;

From 6950d3d0ffab03c22ff4b76a1f7fa4a00f98cb9e Mon Sep 17 00:00:00 2001
From: Rik Roots <rik.roots@guardian.co.uk>
Date: Wed, 22 Apr 2026 09:54:09 +0100
Subject: [PATCH 06/11] Consider where work needs to be done to implement
 feature

---
 dotcom-rendering/src/components/SelfHostedVideo.island.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/dotcom-rendering/src/components/SelfHostedVideo.island.tsx b/dotcom-rendering/src/components/SelfHostedVideo.island.tsx
index e66964e182c..00c58ac4620 100644
--- a/dotcom-rendering/src/components/SelfHostedVideo.island.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideo.island.tsx
@@ -1,3 +1,5 @@
+// DEV NOTE: this component takes a `caption` attribute - the text of the caption should be settled upstream so we don't need to do any additional work here.
+
 import { css } from '@emotion/react';
 import { isUndefined, log, storage } from '@guardian/libs';
 import { from, space, until } from '@guardian/source/foundations';

From ce960e97a627a485d57c605f125be82c5bd4604f Mon Sep 17 00:00:00 2001
From: Rik Roots <rik.roots@guardian.co.uk>
Date: Wed, 22 Apr 2026 09:55:08 +0100
Subject: [PATCH 07/11] Consider where work needs to be done to implement
 feature

---
 dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
index caf63faab21..9b5bb783af5 100644
--- a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
@@ -26,6 +26,8 @@ export const SelfHostedVideoInArticle = ({
 	role = 'inline',
 }: SelfHostedVideoInArticleProps) => {
 	const posterImageUrl = element.posterImage?.[0]?.url;
+
+	// DEV NOTE: this is where we need to do work to determine whether the `caption` attribute text gets to override the `title` attribute text
 	const caption = element.title;
 
 	const sources = extractValidSourcesFromAssets(element.assets);

From 173b82d381ab625fc6c8456a4e689f501efb8bd4 Mon Sep 17 00:00:00 2001
From: Simon Byford <simon.byford@guardian.co.uk>
Date: Tue, 19 May 2026 09:45:24 +0100
Subject: [PATCH 08/11] Update  logic

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

diff --git a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
index 9b5bb783af5..3d312d43f3b 100644
--- a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
@@ -16,6 +16,7 @@ type SelfHostedVideoInArticleProps = {
 	isMainMedia: boolean;
 	videoStyle: VideoPlayerFormat;
 	role?: RoleType;
+	caption?: string;
 };
 
 export const SelfHostedVideoInArticle = ({
@@ -24,12 +25,9 @@ export const SelfHostedVideoInArticle = ({
 	isMainMedia,
 	videoStyle,
 	role = 'inline',
+	caption,
 }: SelfHostedVideoInArticleProps) => {
 	const posterImageUrl = element.posterImage?.[0]?.url;
-
-	// DEV NOTE: this is where we need to do work to determine whether the `caption` attribute text gets to override the `title` attribute text
-	const caption = element.title;
-
 	const sources = extractValidSourcesFromAssets(element.assets);
 	const aspectRatio = getAspectRatioFromSources(sources);
 	const firstVideoSource = sources[0];
diff --git a/dotcom-rendering/src/frontend/schemas/feArticle.json b/dotcom-rendering/src/frontend/schemas/feArticle.json
index bcae1c444c9..09e486ed9d2 100644
--- a/dotcom-rendering/src/frontend/schemas/feArticle.json
+++ b/dotcom-rendering/src/frontend/schemas/feArticle.json
@@ -1914,9 +1914,6 @@
                 },
                 "atomId": {
                     "type": "string"
-                },
-                "caption": {
-                    "type": "string"
                 }
             },
             "required": [
@@ -2876,6 +2873,9 @@
                 },
                 "role": {
                     "$ref": "#/definitions/RoleType"
+                },
+                "caption": {
+                    "type": "string"
                 }
             },
             "required": [
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
index 931e7201cf6..e07373b6029 100644
--- a/dotcom-rendering/src/lib/renderElement.tsx
+++ b/dotcom-rendering/src/lib/renderElement.tsx
@@ -512,6 +512,7 @@ export const renderElement = ({
 						isMainMedia={isMainMedia}
 						videoStyle={element.videoPlayerFormat}
 						role={element.role}
+						caption={element.caption ?? element.title}
 					/>
 				);
 			} else {
@@ -523,7 +524,7 @@ export const renderElement = ({
 						format={format}
 						assets={element.assets}
 						poster={element.posterImage?.[0]?.url}
-						caption={element.title}
+						caption={element.caption ?? element.title}
 						isMainMedia={isMainMedia}
 					/>
 				);
diff --git a/dotcom-rendering/src/model/block-schema.json b/dotcom-rendering/src/model/block-schema.json
index 196176cd3b0..918da7ac58b 100644
--- a/dotcom-rendering/src/model/block-schema.json
+++ b/dotcom-rendering/src/model/block-schema.json
@@ -1387,9 +1387,6 @@
                 },
                 "atomId": {
                     "type": "string"
-                },
-                "caption": {
-                    "type": "string"
                 }
             },
             "required": [
@@ -2349,6 +2346,9 @@
                 },
                 "role": {
                     "$ref": "#/definitions/RoleType"
+                },
+                "caption": {
+                    "type": "string"
                 }
             },
             "required": [
diff --git a/dotcom-rendering/src/types/content.ts b/dotcom-rendering/src/types/content.ts
index 6c2df1a7416..67976797d9e 100644
--- a/dotcom-rendering/src/types/content.ts
+++ b/dotcom-rendering/src/types/content.ts
@@ -213,7 +213,6 @@ export interface ContentAtomBlockElement {
 	_type: 'model.dotcomrendering.pageElements.ContentAtomBlockElement';
 	elementId: string;
 	atomId: string;
-	caption?: string;
 }
 
 interface DisclaimerBlockElement {
@@ -474,6 +473,7 @@ export interface MediaAtomBlockElement {
 	duration?: number;
 	videoPlayerFormat?: VideoPlayerFormat;
 	role?: RoleType;
+	caption?: string;
 }
 
 export interface MultiImageBlockElement {

From 3ca61fa3f589f209a5e70cad28e80c3d57476074 Mon Sep 17 00:00:00 2001
From: Simon Byford <simon.byford@guardian.co.uk>
Date: Tue, 19 May 2026 09:49:00 +0100
Subject: [PATCH 09/11] Remove dev notes

---
 dotcom-rendering/src/components/Caption.tsx            |  1 -
 .../src/components/SelfHostedVideo.island.tsx          |  2 --
 .../src/components/SelfHostedVideoPlayer.tsx           |  2 --
 dotcom-rendering/src/lib/renderElement.tsx             |  8 --------
 dotcom-rendering/src/lib/video.ts                      |  2 --
 dotcom-rendering/src/types/content.ts                  | 10 ----------
 dotcom-rendering/src/types/mainMedia.ts                |  2 --
 7 files changed, 27 deletions(-)

diff --git a/dotcom-rendering/src/components/Caption.tsx b/dotcom-rendering/src/components/Caption.tsx
index 590c65f183a..536aea4105e 100644
--- a/dotcom-rendering/src/components/Caption.tsx
+++ b/dotcom-rendering/src/components/Caption.tsx
@@ -1,4 +1,3 @@
-// DEV NOTE: at this point, we should be supplying the component with `captionText` - decisions about what that string should be should have taken place before this point
 import { css } from '@emotion/react';
 import {
 	between,
diff --git a/dotcom-rendering/src/components/SelfHostedVideo.island.tsx b/dotcom-rendering/src/components/SelfHostedVideo.island.tsx
index 00c58ac4620..e66964e182c 100644
--- a/dotcom-rendering/src/components/SelfHostedVideo.island.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideo.island.tsx
@@ -1,5 +1,3 @@
-// DEV NOTE: this component takes a `caption` attribute - the text of the caption should be settled upstream so we don't need to do any additional work here.
-
 import { css } from '@emotion/react';
 import { isUndefined, log, storage } from '@guardian/libs';
 import { from, space, until } from '@guardian/source/foundations';
diff --git a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
index 4d718d39f3f..0727c28f3fd 100644
--- a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
@@ -1,5 +1,3 @@
-// DEV NOTE: by this point, captions text should be settled - this component doesn't care about it
-
 import { css } from '@emotion/react';
 import {
 	space,
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
index e07373b6029..ba22bc5dd8e 100644
--- a/dotcom-rendering/src/lib/renderElement.tsx
+++ b/dotcom-rendering/src/lib/renderElement.tsx
@@ -372,7 +372,6 @@ export const renderElement = ({
 				</Island>
 			);
 		case 'model.dotcomrendering.pageElements.GuVideoBlockElement':
-			// DEV NOTE: makes use of `credit` and `caption` attribute data
 			return (
 				<GuVideoBlockComponent
 					html={element.html}
@@ -516,9 +515,6 @@ export const renderElement = ({
 					/>
 				);
 			} else {
-				// DEV NOTE: It's at this point where `title` attribute content gets set to `caption` attribute
-				// - add in a check to override title with our new caption at this point
-				// - but we need to make sure that the `caption` attribute gets fed down the chain to this point
 				return (
 					<VideoAtom
 						format={format}
@@ -832,7 +828,6 @@ export const renderElement = ({
 			}
 			return <TweetBlockComponent element={element} />;
 		case 'model.dotcomrendering.pageElements.VideoFacebookBlockElement':
-			// DEV NOTE: ignoring FaceBook video for now
 			return (
 				<Island priority="feature" defer={{ until: 'visible' }}>
 					<VideoFacebookBlockComponent
@@ -852,7 +847,6 @@ export const renderElement = ({
 				</Island>
 			);
 		case 'model.dotcomrendering.pageElements.VideoVimeoBlockElement':
-			// DEV NOTE: ignoring Vimeo video for now
 			return (
 				<VimeoBlockComponent
 					format={format}
@@ -867,7 +861,6 @@ export const renderElement = ({
 			);
 		case 'model.dotcomrendering.pageElements.VideoYoutubeBlockElement':
 			return (
-				// DEV NOTE: the `caption`, `credit` and `title` attributes are being passed down to YoutubeEmbedBlockComponent
 				<YoutubeEmbedBlockComponent
 					format={format}
 					embedUrl={element.embedUrl}
@@ -918,7 +911,6 @@ export const renderElement = ({
 						youtubeHtml,
 						dateCreated,
 					} = element.witnessTypeData;
-					// DEV NOTE: ignoring Witness-related video for now
 					return (
 						<WitnessVideoBlockComponent
 							title={title}
diff --git a/dotcom-rendering/src/lib/video.ts b/dotcom-rendering/src/lib/video.ts
index e71bf074431..645444315aa 100644
--- a/dotcom-rendering/src/lib/video.ts
+++ b/dotcom-rendering/src/lib/video.ts
@@ -1,5 +1,3 @@
-// DEV NOTE - there's nothing in this file which seems to interact with `title` or `caption` attribute data
-
 import type { FEMediaAsset } from '../frontend/feFront';
 import type { VideoAssets } from '../types/content';
 
diff --git a/dotcom-rendering/src/types/content.ts b/dotcom-rendering/src/types/content.ts
index 67976797d9e..9b949bc851e 100644
--- a/dotcom-rendering/src/types/content.ts
+++ b/dotcom-rendering/src/types/content.ts
@@ -287,8 +287,6 @@ export interface GuVideoBlockElement {
 	_type: 'model.dotcomrendering.pageElements.GuVideoBlockElement';
 	elementId: string;
 	assets: VideoAssets[];
-	// DEV NOTE: the `caption` field appears in the VideoAssets object, and again here - Q: are they the same data?
-	// - `model/block-schema.json` marks this `caption` attribute as required, but the VideoAssets version is optional
 	caption: string;
 	html: string;
 	source: string;
@@ -467,8 +465,6 @@ export interface MediaAtomBlockElement {
 		url: string;
 		width: number;
 	}[];
-	// DEV NOTE: the `caption` field appears in the VideoAssets object. MediaAtomBlockElement also supplies a `title` attribute, which possibly comes from MAM?
-	// - `model/block-schema.json` marks this `title` attribute as optional; the VideoAssets `caption` attribute is also optional
 	title?: string;
 	duration?: number;
 	videoPlayerFormat?: VideoPlayerFormat;
@@ -708,7 +704,6 @@ export interface VideoFacebookBlockElement extends ThirdPartyEmbeddedContent {
 	url: string;
 	height: number;
 	width: number;
-	// DEV NOTE - ignoring this for now, think FaceBook is legacy only
 	caption?: string;
 	embedUrl?: string;
 	role?: RoleType;
@@ -721,7 +716,6 @@ export interface VideoVimeoBlockElement extends ThirdPartyEmbeddedContent {
 	url: string;
 	height: number;
 	width: number;
-	// DEV NOTE - ignoring this for now, think Vimeo is legacy only - interesting that it comes with both `title`, `caption` and `credit` attributes!
 	caption?: string;
 	credit?: string;
 	title?: string;
@@ -737,7 +731,6 @@ export interface VideoYoutubeBlockElement extends ThirdPartyEmbeddedContent {
 	originalUrl: string;
 	height: number;
 	width: number;
-	// DEV NOTE - ignoring this for now - given we also have a YoutubeBlockElement, which is the preferred method for embedding YT videos in articles? - interesting that it comes with both `title`, `caption` and `credit` attributes!
 	caption?: string;
 	credit?: string;
 	title?: string;
@@ -747,7 +740,6 @@ export interface VideoYoutubeBlockElement extends ThirdPartyEmbeddedContent {
 export interface YoutubeBlockElement {
 	_type: 'model.dotcomrendering.pageElements.YoutubeBlockElement';
 	assetId: string;
-	// DEV NOTE - the element comes with `mediaTitle` (?) and `altText` attributes - pretty sure altText is for the poster image
 	mediaTitle: string;
 	id: string;
 	elementId: string;
@@ -797,7 +789,6 @@ interface WitnessTypeDataVideo extends WitnessTypeDataBase {
 	youtubeSource: string;
 	youtubeAuthorName: string;
 	height: number;
-	// DEV NOTE - ignoring for now, as I think "witness" is deep legacy stuff. Includes `youtubeDescription` and `youtubeTitle` attributes
 	youtubeTitle: string;
 }
 
@@ -1009,7 +1000,6 @@ export interface VideoAssets {
 		embeddable?: string;
 		height?: string;
 		width?: string;
-		// DEV NOTE: the `caption` field appears in the VideoAssets object
 		caption?: string;
 	};
 	hasAudio?: boolean;
diff --git a/dotcom-rendering/src/types/mainMedia.ts b/dotcom-rendering/src/types/mainMedia.ts
index f34aa63b88c..3a077b04d59 100644
--- a/dotcom-rendering/src/types/mainMedia.ts
+++ b/dotcom-rendering/src/types/mainMedia.ts
@@ -16,7 +16,6 @@ export type YoutubeVideo = Media & {
 	height: number;
 	width: number;
 	origin: string;
-	// DEV NOTE: YouTube video typing here includes a `title` attribute, but no `caption` attribute
 	title: string;
 	duration: number;
 	expired: boolean;
@@ -24,7 +23,6 @@ export type YoutubeVideo = Media & {
 	isLive?: boolean;
 };
 
-// DEV NOTE: self-hosted videos typing here gives no indication of either `title` or `caption` attributes
 type SelfHostedVideo = Media & {
 	type: 'SelfHostedVideo';
 	videoStyle: VideoPlayerFormat;

From 80b473321a75098d4ddd0ce38a2395c9f9f72082 Mon Sep 17 00:00:00 2001
From: Simon Byford <simon.byford@guardian.co.uk>
Date: Tue, 19 May 2026 11:33:02 +0100
Subject: [PATCH 10/11] Add support in YoutubeBlockComponent

---
 dotcom-rendering/src/frontend/schemas/feArticle.json | 3 +++
 dotcom-rendering/src/lib/renderElement.tsx           | 2 +-
 dotcom-rendering/src/model/block-schema.json         | 3 +++
 dotcom-rendering/src/types/content.ts                | 1 +
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/dotcom-rendering/src/frontend/schemas/feArticle.json b/dotcom-rendering/src/frontend/schemas/feArticle.json
index 09e486ed9d2..835e5afc646 100644
--- a/dotcom-rendering/src/frontend/schemas/feArticle.json
+++ b/dotcom-rendering/src/frontend/schemas/feArticle.json
@@ -4069,6 +4069,9 @@
                 },
                 "role": {
                     "$ref": "#/definitions/RoleType"
+                },
+                "caption": {
+                    "type": "string"
                 }
             },
             "required": [
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
index ba22bc5dd8e..31ae9aa8198 100644
--- a/dotcom-rendering/src/lib/renderElement.tsx
+++ b/dotcom-rendering/src/lib/renderElement.tsx
@@ -953,7 +953,7 @@ export const renderElement = ({
 							getLargestImageSize(element.posterImage ?? [])?.url
 						}
 						duration={element.duration}
-						mediaTitle={element.mediaTitle}
+						mediaTitle={element.caption ?? element.mediaTitle}
 						altText={element.altText}
 						origin={host}
 						stickyVideos={!!(isBlog && switches.stickyVideos)}
diff --git a/dotcom-rendering/src/model/block-schema.json b/dotcom-rendering/src/model/block-schema.json
index 918da7ac58b..ff206916ea2 100644
--- a/dotcom-rendering/src/model/block-schema.json
+++ b/dotcom-rendering/src/model/block-schema.json
@@ -3542,6 +3542,9 @@
                 },
                 "role": {
                     "$ref": "#/definitions/RoleType"
+                },
+                "caption": {
+                    "type": "string"
                 }
             },
             "required": [
diff --git a/dotcom-rendering/src/types/content.ts b/dotcom-rendering/src/types/content.ts
index 9b949bc851e..dccae6e7676 100644
--- a/dotcom-rendering/src/types/content.ts
+++ b/dotcom-rendering/src/types/content.ts
@@ -753,6 +753,7 @@ export interface YoutubeBlockElement {
 	overrideImage?: string;
 	altText?: string;
 	role?: RoleType;
+	caption?: string;
 }
 
 interface WitnessTypeDataBase {

From fb9c8724c9bfa100e0adf406c85862b432ec62c5 Mon Sep 17 00:00:00 2001
From: Simon Byford <simon.byford@guardian.co.uk>
Date: Wed, 20 May 2026 14:38:04 +0100
Subject: [PATCH 11/11] Add bottom margin to video elements

---
 .../components/SelfHostedVideoInArticle.tsx   | 63 +++++++++++--------
 dotcom-rendering/src/components/VideoAtom.tsx | 10 ++-
 2 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
index 3d312d43f3b..c640fedf653 100644
--- a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
@@ -1,3 +1,5 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
 import type { FEAspectRatio } from '../frontend/feFront';
 import type { ArticleFormat } from '../lib/articleFormat';
 import {
@@ -10,6 +12,10 @@ import type { VideoPlayerFormat } from '../types/mainMedia';
 import { Island } from './Island';
 import { SelfHostedVideo } from './SelfHostedVideo.island';
 
+const containerStyles = css`
+	margin-bottom: ${space[3]}px;
+`;
+
 type SelfHostedVideoInArticleProps = {
 	element: MediaAtomBlockElement;
 	format: ArticleFormat;
@@ -37,31 +43,36 @@ export const SelfHostedVideoInArticle = ({
 	}
 
 	return (
-		<Island priority="critical" defer={{ until: 'visible' }}>
-			<SelfHostedVideo
-				atomId={element.id}
-				fallbackImage={posterImageUrl}
-				fallbackImageAlt={caption}
-				fallbackImageAspectRatio={
-					(firstVideoSource?.aspectRatio ?? '5:4') as FEAspectRatio
-				}
-				fallbackImageLoading="lazy"
-				fallbackImageSize="small"
-				aspectRatio={aspectRatio}
-				linkTo="Article-embed-MediaAtomBlockElement"
-				posterImage={posterImageUrl}
-				posterImageAspectRatio={firstVideoSource?.aspectRatio ?? '5:4'}
-				sources={sources}
-				subtitleSize="medium"
-				subtitleSource={getSubtitleAsset(element.assets)}
-				videoStyle={videoStyle}
-				uniqueId={element.id}
-				caption={caption}
-				format={format}
-				isMainMedia={isMainMedia}
-				role={role}
-				maxHeightDesktop={firstVideoSource?.height}
-			/>
-		</Island>
+		<div css={containerStyles}>
+			<Island priority="critical" defer={{ until: 'visible' }}>
+				<SelfHostedVideo
+					atomId={element.id}
+					fallbackImage={posterImageUrl}
+					fallbackImageAlt={caption}
+					fallbackImageAspectRatio={
+						(firstVideoSource?.aspectRatio ??
+							'5:4') as FEAspectRatio
+					}
+					fallbackImageLoading="lazy"
+					fallbackImageSize="small"
+					aspectRatio={aspectRatio}
+					linkTo="Article-embed-MediaAtomBlockElement"
+					posterImage={posterImageUrl}
+					posterImageAspectRatio={
+						firstVideoSource?.aspectRatio ?? '5:4'
+					}
+					sources={sources}
+					subtitleSize="medium"
+					subtitleSource={getSubtitleAsset(element.assets)}
+					videoStyle={videoStyle}
+					uniqueId={element.id}
+					caption={caption}
+					format={format}
+					isMainMedia={isMainMedia}
+					role={role}
+					maxHeightDesktop={firstVideoSource?.height}
+				/>
+			</Island>
+		</div>
 	);
 };
diff --git a/dotcom-rendering/src/components/VideoAtom.tsx b/dotcom-rendering/src/components/VideoAtom.tsx
index c899ea6053d..41a9ca837ff 100644
--- a/dotcom-rendering/src/components/VideoAtom.tsx
+++ b/dotcom-rendering/src/components/VideoAtom.tsx
@@ -1,7 +1,13 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
 import type { ArticleFormat } from '../lib/articleFormat';
 import { Caption } from './Caption';
 import { MaintainAspectRatio } from './MaintainAspectRatio';
 
+const figureStyles = css`
+	margin-bottom: ${space[3]}px;
+`;
+
 type AssetType = {
 	url: string;
 	mimeType?: string;
@@ -30,7 +36,7 @@ export const VideoAtom = ({
 		return null;
 	} // Handle empty assets array
 	return (
-		<>
+		<figure css={figureStyles}>
 			<MaintainAspectRatio
 				height={height}
 				width={width}
@@ -65,6 +71,6 @@ export const VideoAtom = ({
 					isMainMedia={isMainMedia}
 				/>
 			)}
-		</>
+		</figure>
 	);
 };