From 152e323d1854ee8dc2934eb7c61b1ea310ad04ac Mon Sep 17 00:00:00 2001
From: Max Duval <max.duval@theguardian.com>
Date: Tue, 16 Jan 2024 10:04:40 +0000
Subject: [PATCH] refactor(YoutubeAtom): no reliance on elementId

we can generate a unique elementI from an increasing
integer on the client. On the server this defaults
to 0 or `undefined`
---
 .../tests/parallel-5/atom.video.e2e.spec.ts   | 13 +++--
 dotcom-rendering/src/components/Card/Card.tsx |  4 --
 .../YoutubeAtom/YoutubeAtom.stories.tsx       | 56 +++++++++----------
 .../YoutubeAtom/YoutubeAtom.test.tsx          | 18 +++---
 .../components/YoutubeAtom/YoutubeAtom.tsx    | 29 ++++++----
 .../YoutubeBlockComponent.importable.tsx      | 22 +++++---
 .../YoutubeBlockComponent.stories.tsx         | 14 -----
 dotcom-rendering/src/lib/renderElement.tsx    |  2 -
 8 files changed, 75 insertions(+), 83 deletions(-)

diff --git a/dotcom-rendering/playwright/tests/parallel-5/atom.video.e2e.spec.ts b/dotcom-rendering/playwright/tests/parallel-5/atom.video.e2e.spec.ts
index f0918e1d27d..cab8bd568d1 100644
--- a/dotcom-rendering/playwright/tests/parallel-5/atom.video.e2e.spec.ts
+++ b/dotcom-rendering/playwright/tests/parallel-5/atom.video.e2e.spec.ts
@@ -26,6 +26,7 @@ const interceptOphanPlayEvent = ({ page, id }: { page: Page; id: string }) => {
 			.startsWith('http://ophan.theguardian.com/img/2?');
 		const searchParams = new URLSearchParams(request.url());
 		const videoSearchParam = searchParams.get('video');
+		console.log(id, videoSearchParam);
 		const expectedVideoSearchParam = JSON.stringify({
 			id,
 			eventType: 'video:content:play',
@@ -143,7 +144,7 @@ test.describe('YouTube Atom', () => {
 		// Listen for the ophan call made when the video is played
 		const ophanPlayEventPromise = interceptOphanPlayEvent({
 			page,
-			id: 'gu-video-youtube-2b33a7b7-e639-4232-9ecd-0fb920fa8147',
+			id: 'gu-video-youtube-1',
 		});
 
 		// Listen for the YouTube embed call made when the video is played
@@ -193,7 +194,7 @@ test.describe('YouTube Atom', () => {
 		// Listen for the ophan call made when the video is played
 		const ophanPlayEventPromise = interceptOphanPlayEvent({
 			page,
-			id: 'gu-video-youtube-2bc6f709-865e-49ae-b01b-8fc38eb4e9a7',
+			id: 'gu-video-youtube-1',
 		});
 
 		// Listen for the YouTube embed call made when the video is played
@@ -257,7 +258,7 @@ test.describe('YouTube Atom', () => {
 		// Listen for the ophan call made when the video is played
 		const ophanPlayEventPromise = interceptOphanPlayEvent({
 			page,
-			id: 'gu-video-youtube-1e89d5bd-489e-470a-857e-4f30e85b5aec',
+			id: 'gu-video-youtube-1',
 		});
 
 		// Listen for the YouTube embed call made when the video is played
@@ -297,7 +298,7 @@ test.describe('YouTube Atom', () => {
 		// Listen for the ophan call made when the video is played
 		const ophanPlayEventPromise2 = interceptOphanPlayEvent({
 			page,
-			id: 'gu-video-youtube-1e89d5bd-489e-470a-857e-4f30e85b5aec',
+			id: 'gu-video-youtube-2',
 		});
 
 		// Listen for the YouTube embed call made when the video is played
@@ -349,7 +350,7 @@ test.describe('YouTube Atom', () => {
 		// Listen for the ophan call made when the video is played
 		const ophanPlayEventPromise = interceptOphanPlayEvent({
 			page,
-			id: 'gu-video-youtube-2bc6f709-865e-49ae-b01b-8fc38eb4e9a7',
+			id: 'gu-video-youtube-1',
 		});
 
 		// Listen for the YouTube embed call made when the video is played
@@ -406,7 +407,7 @@ test.describe('YouTube Atom', () => {
 		// Listen for the ophan call made when the video is played
 		const ophanPlayEventPromise = interceptOphanPlayEvent({
 			page,
-			id: 'gu-video-youtube-1e89d5bd-489e-470a-857e-4f30e85b5aec',
+			id: 'gu-video-youtube-1',
 		});
 
 		// Play main media video
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index af4e2f53b65..ab7fd3da09d 100644
--- a/dotcom-rendering/src/components/Card/Card.tsx
+++ b/dotcom-rendering/src/components/Card/Card.tsx
@@ -473,10 +473,6 @@ export const Card = ({
 											defer={{ until: 'visible' }}
 										>
 											<YoutubeBlockComponent
-												id={media.mainMedia.elementId}
-												elementId={
-													media.mainMedia.elementId
-												}
 												assetId={
 													media.mainMedia.videoId
 												}
diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.stories.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.stories.tsx
index 2907c77e948..66e2e9f7f15 100644
--- a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.stories.tsx
+++ b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.stories.tsx
@@ -55,7 +55,7 @@ export const NoConsent = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -83,7 +83,7 @@ export const NoOverlay = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -118,7 +118,7 @@ export const WithOverrideImage = (): JSX.Element => {
 		<div style={containerStyle}>
 			<OverlayAutoplayExplainer />
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="3jpXAMwRSu4"
 				alt="Microscopic image of COVID"
 				eventEmitters={[
@@ -150,7 +150,7 @@ export const WithPosterImage = (): JSX.Element => {
 		<div style={containerStyle}>
 			<OverlayAutoplayExplainer />
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="N9Cgy-ke5-s"
 				alt=""
 				eventEmitters={[
@@ -185,7 +185,7 @@ export const WithOverlayAndPosterImage = (): JSX.Element => {
 		<div style={containerStyle}>
 			<OverlayAutoplayExplainer />
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="N9Cgy-ke5-s"
 				alt=""
 				eventEmitters={[
@@ -224,7 +224,7 @@ export const GiveConsent = (): JSX.Element => {
 			<button onClick={() => setConsented(true)}>Give consent</button>
 			<div style={containerStyle}>
 				<YoutubeAtom
-					elementId="xyz"
+					elementId={123}
 					videoId="3jpXAMwRSu4"
 					alt="Microscopic image of COVID"
 					eventEmitters={[
@@ -258,7 +258,7 @@ export const Sticky = (): JSX.Element => {
 			<div>Scroll down...</div>
 			<div style={{ height: '1000px' }}></div>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -292,7 +292,7 @@ export const StickyMainMedia = (): JSX.Element => {
 			<div>Scroll down...</div>
 			<div style={{ height: '1000px' }}></div>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -328,7 +328,7 @@ export const DuplicateVideos = (): JSX.Element => {
 	return (
 		<div style={containerStyleSmall}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -350,7 +350,7 @@ export const DuplicateVideos = (): JSX.Element => {
 			/>
 			<br />
 			<YoutubeAtom
-				elementId="xyz2"
+				elementId={345}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -388,7 +388,7 @@ export const MultipleStickyVideos = (): JSX.Element => {
 	return (
 		<div style={{ width: '500px', height: '5000px' }}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -411,7 +411,7 @@ export const MultipleStickyVideos = (): JSX.Element => {
 				adTargeting={adTargeting}
 			/>
 			<YoutubeAtom
-				elementId="xyz-2"
+				elementId={456}
 				videoId="pcMiS6PW8aQ"
 				alt=""
 				eventEmitters={[
@@ -434,7 +434,7 @@ export const MultipleStickyVideos = (): JSX.Element => {
 				adTargeting={adTargeting}
 			/>
 			<YoutubeAtom
-				elementId="xyu"
+				elementId={789}
 				videoId="3jpXAMwRSu4"
 				alt=""
 				eventEmitters={[
@@ -469,7 +469,7 @@ export const PausesOffscreen = (): JSX.Element => {
 		<div>
 			<div>Scroll down...</div>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -506,7 +506,7 @@ export const NoConsentWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -534,7 +534,7 @@ export const AdFreeWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -563,7 +563,7 @@ export const NoOverlayWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -593,7 +593,7 @@ export const WithOverrideImageWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="3jpXAMwRSu4"
 				alt="Microscopic image of COVID"
 				eventEmitters={[
@@ -622,7 +622,7 @@ export const WithPosterImageWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="N9Cgy-ke5-s"
 				alt=""
 				eventEmitters={[
@@ -653,7 +653,7 @@ export const WithOverlayAndPosterImageWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="N9Cgy-ke5-s"
 				alt=""
 				eventEmitters={[
@@ -688,7 +688,7 @@ export const GiveConsentWithIma = (): JSX.Element => {
 			<button onClick={() => setConsented(true)}>Give consent</button>
 			<div style={containerStyle}>
 				<YoutubeAtom
-					elementId="xyz"
+					elementId={123}
 					videoId="3jpXAMwRSu4"
 					alt="Microscopic image of COVID"
 					eventEmitters={[
@@ -722,7 +722,7 @@ export const StickyWithIma = (): JSX.Element => {
 			<div style={{ fontSize: '36px' }}>⬇️</div>
 			<div style={{ height: '1000px' }}></div>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -755,7 +755,7 @@ export const StickyMainMediaWithIma = (): JSX.Element => {
 			<div style={{ fontSize: '36px' }}>⬇️</div>
 			<div style={{ height: '1000px' }}></div>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -786,7 +786,7 @@ export const DuplicateVideosWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyleSmall}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -808,7 +808,7 @@ export const DuplicateVideosWithIma = (): JSX.Element => {
 			/>
 			<br />
 			<YoutubeAtom
-				elementId="xyz2"
+				elementId={345}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -840,7 +840,7 @@ export const MultipleStickyVideosWithIma = (): JSX.Element => {
 	return (
 		<div style={{ width: '500px', height: '5000px' }}>
 			<YoutubeAtom
-				elementId="xyz"
+				elementId={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -863,7 +863,7 @@ export const MultipleStickyVideosWithIma = (): JSX.Element => {
 				abTestParticipations={{}}
 			/>
 			<YoutubeAtom
-				elementId="xyz-2"
+				elementId={456}
 				videoId="pcMiS6PW8aQ"
 				alt=""
 				eventEmitters={[
@@ -886,7 +886,7 @@ export const MultipleStickyVideosWithIma = (): JSX.Element => {
 				abTestParticipations={{}}
 			/>
 			<YoutubeAtom
-				elementId="xyu"
+				elementId={789}
 				videoId="3jpXAMwRSu4"
 				alt=""
 				eventEmitters={[
diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.test.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.test.tsx
index 21c2857dbdf..0600e3af892 100644
--- a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.test.tsx
+++ b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.test.tsx
@@ -28,7 +28,7 @@ describe('YoutubeAtom', () => {
 				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
 			>
 				<YoutubeAtom
-					elementId="123"
+					elementId={123}
 					title="My Youtube video!"
 					videoId="ZCvZmYlQD8"
 					alt=""
@@ -58,7 +58,7 @@ describe('YoutubeAtom', () => {
 				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
 			>
 				<YoutubeAtom
-					elementId="123"
+					elementId={123}
 					title="My Youtube video!"
 					videoId="ZCvZmYlQD8"
 					alt=""
@@ -97,7 +97,7 @@ describe('YoutubeAtom', () => {
 				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
 			>
 				<YoutubeAtom
-					elementId="123"
+					elementId={123}
 					title="My Youtube video!"
 					videoId="ZCvZmYlQD8"
 					alt=""
@@ -128,7 +128,7 @@ describe('YoutubeAtom', () => {
 				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
 			>
 				<YoutubeAtom
-					elementId="123"
+					elementId={123}
 					title="My Youtube video!"
 					videoId="ZCvZmYlQD8"
 					alt=""
@@ -161,7 +161,7 @@ describe('YoutubeAtom', () => {
 				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
 			>
 				<YoutubeAtom
-					elementId="123"
+					elementId={123}
 					title="My Youtube video!"
 					videoId="ZCvZmYlQD8"
 					alt=""
@@ -192,7 +192,7 @@ describe('YoutubeAtom', () => {
 				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
 			>
 				<YoutubeAtom
-					elementId="123"
+					elementId={123}
 					title="My Youtube video!"
 					videoId="ZCvZmYlQD8"
 					alt=""
@@ -222,7 +222,7 @@ describe('YoutubeAtom', () => {
 				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
 			>
 				<YoutubeAtom
-					elementId="123"
+					elementId={123}
 					title="My Youtube video!"
 					videoId="ZCvZmYlQD8"
 					alt=""
@@ -256,7 +256,7 @@ describe('YoutubeAtom', () => {
 					value={{ renderingTarget: 'Web', darkModeAvailable: false }}
 				>
 					<YoutubeAtom
-						elementId="123"
+						elementId={123}
 						title="My Youtube video!"
 						videoId="ZCvZmYlQD8"
 						alt=""
@@ -274,7 +274,7 @@ describe('YoutubeAtom', () => {
 						abTestParticipations={{}}
 					/>
 					<YoutubeAtom
-						elementId="123"
+						elementId={123}
 						title="My Youtube video 2!"
 						videoId="ZCvZmYlQD8"
 						alt=""
diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx
index b8484508e84..96f37955e63 100644
--- a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx
+++ b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx
@@ -1,7 +1,7 @@
 import type { Participations } from '@guardian/ab-core';
 import type { ConsentState } from '@guardian/consent-management-platform/dist/types';
 import type { ArticleFormat } from '@guardian/libs';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { MaintainAspectRatio } from '../MaintainAspectRatio';
 import type { VideoCategory } from './YoutubeAtomOverlay';
 import { YoutubeAtomOverlay } from './YoutubeAtomOverlay';
@@ -21,8 +21,8 @@ export type VideoEventKey =
 	| 'pause';
 
 type Props = {
-	elementId: string;
 	videoId: string;
+	elementId: 'server' | number;
 	overrideImage?: string | undefined;
 	posterImage?: string | undefined;
 	adTargeting?: AdTargeting;
@@ -134,16 +134,21 @@ export const YoutubeAtom = ({
 	 */
 	const showPlaceholder = (!hasOverlay || overlayClicked) && !playerReady;
 
-	let loadPlayer;
-	if (!hasOverlay) {
-		// load the player if there is no overlay
-		loadPlayer = true;
-	} else if (overlayClicked) {
-		// load the player if the overlay has been clicked
-		loadPlayer = true;
-	} else {
-		loadPlayer = false;
-	}
+	const [loadPlayer, setLoadPlayer] = useState<boolean>(false);
+	useEffect(() => {
+		if (elementId === 'server') {
+			// We may never load the player on the server
+			return;
+		}
+
+		if (!hasOverlay) {
+			// load the player if there is no overlay
+			setLoadPlayer(true);
+		} else if (overlayClicked) {
+			// load the player if the overlay has been clicked
+			setLoadPlayer(true);
+		}
+	}, [elementId, hasOverlay, overlayClicked]);
 
 	/**
 	 * Create a stable callback as it will be a useEffect dependency in YoutubeAtomPlayer
diff --git a/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx b/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
index c3527a6f2b8..24e15d13208 100644
--- a/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
+++ b/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import type { ConsentState } from '@guardian/consent-management-platform/dist/types';
+import { isUndefined } from '@guardian/libs';
 import { body, palette, space } from '@guardian/source-foundations';
 import { SvgAlertRound } from '@guardian/source-react-components';
 import { useEffect, useState } from 'react';
@@ -12,8 +13,6 @@ import { useConfig } from './ConfigContext';
 import { YoutubeAtom } from './YoutubeAtom/YoutubeAtom';
 
 type Props = {
-	id: string;
-	elementId: string;
 	mediaTitle?: string;
 	altText?: string;
 	assetId: string;
@@ -87,9 +86,9 @@ const getLargestImageSize = (
 	}[],
 ) => [...images].sort((a, b) => a.width - b.width).pop();
 
+let index: number | undefined;
+
 export const YoutubeBlockComponent = ({
-	id,
-	elementId,
 	assetId,
 	mediaTitle,
 	altText,
@@ -121,6 +120,13 @@ export const YoutubeBlockComponent = ({
 		abTestsApi?.isUserInVariant('IntegrateIma', 'variant') ?? false;
 	const abTestParticipations = abTests?.participations ?? {};
 
+	const [id, setId] = useState<number>();
+
+	useEffect(() => {
+		index ??= 0;
+		setId(++index);
+	}, []);
+
 	useEffect(() => {
 		const defineConsentState = async () => {
 			const { onConsentChange } = await import(
@@ -179,7 +185,7 @@ export const YoutubeBlockComponent = ({
 	}
 
 	const ophanTracking = async (trackingEvent: string): Promise<void> => {
-		if (!id) return;
+		if (isUndefined(id)) return;
 		const ophan = await getOphan(renderingTarget);
 		ophan.record({
 			video: {
@@ -190,17 +196,17 @@ export const YoutubeBlockComponent = ({
 	};
 
 	const gaTracking = (trackingEvent: string) => {
-		if (!id) return;
+		if (isUndefined(id)) return;
 		trackVideoInteraction({
 			trackingEvent,
-			elementId: id,
+			elementId: String(id),
 		});
 	};
 
 	return (
 		<div data-chromatic="ignore" data-component="youtube-atom">
 			<YoutubeAtom
-				elementId={elementId}
+				elementId={id ?? 'server'}
 				videoId={assetId}
 				overrideImage={overrideImage}
 				posterImage={getLargestImageSize(posterImage)?.url}
diff --git a/dotcom-rendering/src/components/YoutubeBlockComponent.stories.tsx b/dotcom-rendering/src/components/YoutubeBlockComponent.stories.tsx
index 8ec8de567bd..cdd64a6ad6e 100644
--- a/dotcom-rendering/src/components/YoutubeBlockComponent.stories.tsx
+++ b/dotcom-rendering/src/components/YoutubeBlockComponent.stories.tsx
@@ -49,8 +49,6 @@ export const Default = () => {
 				}}
 				assetId="d2Q5bXvEgMg"
 				mediaTitle="Prince Harry and Meghan's 'bombshell' plans explained – video"
-				id="c2b8a51c-cb3d-41e7-bb79-1d9a091d0c28"
-				elementId="5ab531a2-f6ea-499d-b274-191114c8628c"
 				expired={false}
 				stickyVideos={false}
 			/>
@@ -82,8 +80,6 @@ export const Vertical = () => {
 				}}
 				assetId="d2Q5bXvEgMg"
 				mediaTitle="Prince Harry and Meghan's 'bombshell' plans explained – video"
-				id="c2b8a51c-cb3d-41e7-bb79-1d9a091d0c28"
-				elementId="5ab531a2-f6ea-499d-b274-191114c8628c"
 				expired={false}
 				height={259}
 				width={460}
@@ -117,8 +113,6 @@ export const Expired = () => {
 				}}
 				assetId="d2Q5bXvEgMg"
 				mediaTitle="Prince Harry and Meghan's 'bombshell' plans explained – video"
-				id="c2b8a51c-cb3d-41e7-bb79-1d9a091d0c28"
-				elementId="5ab531a2-f6ea-499d-b274-191114c8628c"
 				expired={true}
 				overrideImage="https://i.guim.co.uk/img/media/49565a29c6586fe6b748926e0be96c5e9c90473c/0_0_4981_2989/500.jpg?quality=85&auto=format&fit=max&s=17c70ec70002ea34886fd6c2605cd81e"
 				height={259}
@@ -153,8 +147,6 @@ export const WithOverlayImage = () => {
 				}}
 				assetId="d2Q5bXvEgMg"
 				mediaTitle="Prince Harry and Meghan's 'bombshell' plans explained – video"
-				id="c2b8a51c-cb3d-41e7-bb79-1d9a091d0c28"
-				elementId="5ab531a2-f6ea-499d-b274-191114c8628c"
 				expired={false}
 				duration={333}
 				overrideImage="https://i.guim.co.uk/img/media/49565a29c6586fe6b748926e0be96c5e9c90473c/0_0_4981_2989/500.jpg?quality=85&auto=format&fit=max&s=17c70ec70002ea34886fd6c2605cd81e"
@@ -190,8 +182,6 @@ export const WithPosterImage = () => {
 				}}
 				assetId="d2Q5bXvEgMg"
 				mediaTitle="Prince Harry and Meghan's 'bombshell' plans explained – video"
-				id="c2b8a51c-cb3d-41e7-bb79-1d9a091d0c28"
-				elementId="5ab531a2-f6ea-499d-b274-191114c8628c"
 				expired={false}
 				duration={333}
 				posterImage={[
@@ -248,8 +238,6 @@ export const WithPosterAndOverlayImage = () => {
 				}}
 				assetId="d2Q5bXvEgMg"
 				mediaTitle="Prince Harry and Meghan's 'bombshell' plans explained – video"
-				id="c2b8a51c-cb3d-41e7-bb79-1d9a091d0c28"
-				elementId="5ab531a2-f6ea-499d-b274-191114c8628c"
 				expired={false}
 				overrideImage="https://i.guim.co.uk/img/media/49565a29c6586fe6b748926e0be96c5e9c90473c/0_0_4981_2989/500.jpg?quality=85&auto=format&fit=max&s=17c70ec70002ea34886fd6c2605cd81e"
 				duration={333}
@@ -307,8 +295,6 @@ export const WithShowMainVideoFlagOff = () => {
 				}}
 				assetId="d2Q5bXvEgMg"
 				mediaTitle="Prince Harry and Meghan's 'bombshell' plans explained – video"
-				id="c2b8a51c-cb3d-41e7-bb79-1d9a091d0c28"
-				elementId="5ab531a2-f6ea-499d-b274-191114c8628c"
 				expired={false}
 				overrideImage="https://i.guim.co.uk/img/media/49565a29c6586fe6b748926e0be96c5e9c90473c/0_0_4981_2989/500.jpg?quality=85&auto=format&fit=max&s=17c70ec70002ea34886fd6c2605cd81e"
 				duration={333}
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
index e9c328d3d59..87f07322f38 100644
--- a/dotcom-rendering/src/lib/renderElement.tsx
+++ b/dotcom-rendering/src/lib/renderElement.tsx
@@ -742,8 +742,6 @@ export const renderElement = ({
 						key={index}
 						hideCaption={hideCaption}
 						isMainMedia={isMainMedia}
-						id={element.id}
-						elementId={element.elementId}
 						assetId={element.assetId}
 						expired={element.expired}
 						overrideImage={element.overrideImage}