From 03f7b523add7a8ae4a19c5660ad8fa29cbcaeb08 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Fri, 3 Jul 2026 11:38:18 +0100
Subject: [PATCH 1/2] Dynamic data attribute for self hosted video, remove
 wrapper

Co-Authored-By: Pip <47357469+pippinpen@users.noreply.github.com>
Co-Authored-By: Alessia Amitrano <alessia.amitranobo@gmail.com>
---
 .../src/components/SelfHostedVideo.island.tsx |  9 ++-
 .../components/SelfHostedVideoInArticle.tsx   | 69 ++++++++-----------
 2 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/dotcom-rendering/src/components/SelfHostedVideo.island.tsx b/dotcom-rendering/src/components/SelfHostedVideo.island.tsx
index 615a6c94c7a..249148739b1 100644
--- a/dotcom-rendering/src/components/SelfHostedVideo.island.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideo.island.tsx
@@ -1071,13 +1071,18 @@ export const SelfHostedVideo = ({
 		}
 	}
 
+	const videoStyleFormat = videoStyle.toLocaleLowerCase();
+
 	return (
 		<figure
+			css={css`
+				margin-bottom: ${space[3]}px;
+			`}
 			ref={videoContainerRef}
-			className={`video-container ${videoStyle.toLocaleLowerCase()} ${
+			className={`video-container ${videoStyleFormat} ${
 				role === 'immersive' ? 'element-video-immersive' : ''
 			}`}
-			data-component="gu-video-loop"
+			data-component={`gu-video-${videoStyleFormat}`}
 		>
 			<div
 				ref={setNode}
diff --git a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
index 47d98d22943..7998e4510ef 100644
--- a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
@@ -1,5 +1,3 @@
-import { css } from '@emotion/react';
-import { space } from '@guardian/source/foundations';
 import type { FEAspectRatio } from '../frontend/feFront';
 import { isInteractive } from '../layouts/lib/interactiveLegacyStyling';
 import type { ArticleFormat } from '../lib/articleFormat';
@@ -13,10 +11,6 @@ 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;
@@ -49,39 +43,34 @@ export const SelfHostedVideoInArticle = ({
 	}
 
 	return (
-		<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}
-					preventAutoplay={videoStyle === 'Default'}
-					restrictHeightOnDesktop={
-						isVerticalVideo && !isInteractive(format.design)
-					}
-				/>
-			</Island>
-		</div>
+		<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}
+				preventAutoplay={videoStyle === 'Default'}
+				restrictHeightOnDesktop={
+					isVerticalVideo && !isInteractive(format.design)
+				}
+			/>
+		</Island>
 	);
 };

From 15fb6de9460b135526c2d00a914380f68eb40689 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederick.obrien@guardian.co.uk>
Date: Fri, 3 Jul 2026 12:28:29 +0100
Subject: [PATCH 2/2] Only apply bottom padding in articles

---
 .../src/components/SelfHostedVideo.island.tsx        | 12 +++++++++---
 .../src/components/SelfHostedVideoInArticle.tsx      |  1 +
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/dotcom-rendering/src/components/SelfHostedVideo.island.tsx b/dotcom-rendering/src/components/SelfHostedVideo.island.tsx
index 249148739b1..3ca38897ea0 100644
--- a/dotcom-rendering/src/components/SelfHostedVideo.island.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideo.island.tsx
@@ -319,6 +319,7 @@ type Props = {
 		isExternalLink: boolean;
 	};
 	isInLoopClickTestVariant?: boolean;
+	isInArticle?: boolean;
 };
 
 export const SelfHostedVideo = ({
@@ -351,6 +352,7 @@ export const SelfHostedVideo = ({
 	restrictHeightOnDesktop = false,
 	cardLink,
 	isInLoopClickTestVariant,
+	isInArticle = false,
 }: Props) => {
 	const adapted = useShouldAdapt();
 	const { renderingTarget } = useConfig();
@@ -1075,9 +1077,13 @@ export const SelfHostedVideo = ({
 
 	return (
 		<figure
-			css={css`
-				margin-bottom: ${space[3]}px;
-			`}
+			css={
+				isInArticle
+					? css`
+							margin-bottom: ${space[3]}px;
+						`
+					: undefined
+			}
 			ref={videoContainerRef}
 			className={`video-container ${videoStyleFormat} ${
 				role === 'immersive' ? 'element-video-immersive' : ''
diff --git a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
index 7998e4510ef..7e4ccc0666d 100644
--- a/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
@@ -70,6 +70,7 @@ export const SelfHostedVideoInArticle = ({
 				restrictHeightOnDesktop={
 					isVerticalVideo && !isInteractive(format.design)
 				}
+				isInArticle={true}
 			/>
 		</Island>
 	);