From e0a4772463d307fdd75f1b4d121346b1a71a9ffb 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 1/2] 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`

rename the elementId to id for the MainMedia type
---
 .../fixtures/generated/articles/Dead.ts       |  1 -
 .../fixtures/generated/articles/Feature.ts    |  1 -
 .../fixtures/generated/articles/Live.ts       |  1 -
 dotcom-rendering/fixtures/manual/trails.ts    |  4 +-
 .../src/components/Card/Card.stories.tsx      |  2 +-
 dotcom-rendering/src/components/Card/Card.tsx |  5 +-
 .../src/components/Elements.amp.tsx           |  2 +-
 .../src/components/LiveBlock.stories.tsx      |  1 -
 .../YoutubeAtom/YoutubeAtom.stories.tsx       | 56 +++++++++----------
 .../YoutubeAtom/YoutubeAtom.test.tsx          | 18 +++---
 .../components/YoutubeAtom/YoutubeAtom.tsx    | 29 ++++++----
 .../YoutubeBlockComponent.importable.tsx      | 14 ++++-
 .../YoutubeBlockComponent.stories.tsx         |  7 ---
 .../src/lib/liveblogAdSlots.test.ts           |  1 -
 dotcom-rendering/src/lib/renderElement.tsx    |  1 -
 .../src/model/article-schema.json             |  8 +--
 dotcom-rendering/src/model/block-schema.json  |  4 --
 dotcom-rendering/src/model/enhanceCards.ts    |  2 +-
 dotcom-rendering/src/model/front-schema.json  |  4 +-
 dotcom-rendering/src/types/content.ts         |  1 -
 dotcom-rendering/src/types/mainMedia.ts       |  2 +-
 21 files changed, 76 insertions(+), 88 deletions(-)

diff --git a/dotcom-rendering/fixtures/generated/articles/Dead.ts b/dotcom-rendering/fixtures/generated/articles/Dead.ts
index 6c6ec3a8cc0..53b7c9b9c30 100644
--- a/dotcom-rendering/fixtures/generated/articles/Dead.ts
+++ b/dotcom-rendering/fixtures/generated/articles/Dead.ts
@@ -1974,7 +1974,6 @@ export const Dead: DCRArticle = {
 					],
 					expired: false,
 					duration: 142,
-					elementId: '61b9e0cb-6602-4ccb-bda6-a6d6c3f2eae0',
 				},
 			],
 			attributes: {
diff --git a/dotcom-rendering/fixtures/generated/articles/Feature.ts b/dotcom-rendering/fixtures/generated/articles/Feature.ts
index 352d56c22f7..edb492f0322 100644
--- a/dotcom-rendering/fixtures/generated/articles/Feature.ts
+++ b/dotcom-rendering/fixtures/generated/articles/Feature.ts
@@ -1455,7 +1455,6 @@ export const Feature: DCRArticle = {
 			duration: 207,
 			altText:
 				"Press Room - 92nd Academy Awards<br>epa08208148 Joaquin Phoenix poses in the press room with the Oscar for Best Actor for his performance in 'Joker' during the 92nd annual Academy Awards ceremony at the Dolby Theatre in Hollywood, California, USA, 09 February 2020. The Oscars are presented for outstanding individual or collective efforts in filmmaking in 24 categories.  EPA/DAVID SWANSON",
-			elementId: 'c7aded24-44a0-42fb-bf42-94d2559c0a25',
 		},
 	],
 	canonicalUrl:
diff --git a/dotcom-rendering/fixtures/generated/articles/Live.ts b/dotcom-rendering/fixtures/generated/articles/Live.ts
index 8e839b5e80a..7503e7fd927 100644
--- a/dotcom-rendering/fixtures/generated/articles/Live.ts
+++ b/dotcom-rendering/fixtures/generated/articles/Live.ts
@@ -1974,7 +1974,6 @@ export const Live: DCRArticle = {
 					],
 					expired: false,
 					duration: 142,
-					elementId: '93a2d182-3d98-4319-9a8b-602e4adff560',
 				},
 			],
 			attributes: {
diff --git a/dotcom-rendering/fixtures/manual/trails.ts b/dotcom-rendering/fixtures/manual/trails.ts
index 919093f4e2e..06c3b19ab7a 100644
--- a/dotcom-rendering/fixtures/manual/trails.ts
+++ b/dotcom-rendering/fixtures/manual/trails.ts
@@ -94,7 +94,7 @@ export const trails: [
 		showQuotedHeadline: false,
 		mainMedia: {
 			type: 'Video',
-			elementId: 'abcdef',
+			id: 'abcdef',
 			videoId: 'abcd',
 			title: 'some title',
 			duration: 378,
@@ -527,7 +527,7 @@ export const trails: [
 		],
 		mainMedia: {
 			type: 'Video',
-			elementId: 'abcdef',
+			id: 'abcdef',
 			videoId: 'abcd',
 			title: 'some title',
 			duration: 378,
diff --git a/dotcom-rendering/src/components/Card/Card.stories.tsx b/dotcom-rendering/src/components/Card/Card.stories.tsx
index 083d74b3281..5509a5ee7f9 100644
--- a/dotcom-rendering/src/components/Card/Card.stories.tsx
+++ b/dotcom-rendering/src/components/Card/Card.stories.tsx
@@ -52,7 +52,7 @@ const aBasicLink = {
 
 const mainVideo: MainMedia = {
 	type: 'Video',
-	elementId: '1234-abcdef-09876-xyz',
+	id: '1234-abcdef-09876-xyz',
 	videoId: '8M_yH-e9cq8',
 	title: '’I care, but I don’t care’: Life after the Queen’s death | Anywhere but Westminster',
 	expired: false,
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index af4e2f53b65..ca3e35525af 100644
--- a/dotcom-rendering/src/components/Card/Card.tsx
+++ b/dotcom-rendering/src/components/Card/Card.tsx
@@ -473,10 +473,7 @@ export const Card = ({
 											defer={{ until: 'visible' }}
 										>
 											<YoutubeBlockComponent
-												id={media.mainMedia.elementId}
-												elementId={
-													media.mainMedia.elementId
-												}
+												id={media.mainMedia.id}
 												assetId={
 													media.mainMedia.videoId
 												}
diff --git a/dotcom-rendering/src/components/Elements.amp.tsx b/dotcom-rendering/src/components/Elements.amp.tsx
index 0ff5b993c9a..435d5772bab 100644
--- a/dotcom-rendering/src/components/Elements.amp.tsx
+++ b/dotcom-rendering/src/components/Elements.amp.tsx
@@ -345,7 +345,7 @@ export const Elements = (
 			case 'model.dotcomrendering.pageElements.YoutubeBlockElement':
 				return (
 					<YoutubeBlockComponent
-						key={element.elementId}
+						key={element.id}
 						element={element}
 						pillar={pillar}
 						adTargeting={adTargeting}
diff --git a/dotcom-rendering/src/components/LiveBlock.stories.tsx b/dotcom-rendering/src/components/LiveBlock.stories.tsx
index ce853723b36..ba91c8a9c75 100644
--- a/dotcom-rendering/src/components/LiveBlock.stories.tsx
+++ b/dotcom-rendering/src/components/LiveBlock.stories.tsx
@@ -144,7 +144,6 @@ export const Video = () => {
 			},
 			{
 				duration: 142,
-				elementId: '27eac530-7088-4541-a1c5-3347a3d837fb',
 				expired: false,
 				mediaTitle:
 					'Nasa launches Perseverance rover in mission to find evidence of life on Mars – video',
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..f12addb755b 100644
--- a/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
+++ b/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
@@ -13,7 +13,6 @@ import { YoutubeAtom } from './YoutubeAtom/YoutubeAtom';
 
 type Props = {
 	id: string;
-	elementId: string;
 	mediaTitle?: string;
 	altText?: string;
 	assetId: string;
@@ -87,9 +86,11 @@ const getLargestImageSize = (
 	}[],
 ) => [...images].sort((a, b) => a.width - b.width).pop();
 
+/** always undefined on the server */
+let index: number | undefined;
+
 export const YoutubeBlockComponent = ({
 	id,
-	elementId,
 	assetId,
 	mediaTitle,
 	altText,
@@ -121,6 +122,13 @@ export const YoutubeBlockComponent = ({
 		abTestsApi?.isUserInVariant('IntegrateIma', 'variant') ?? false;
 	const abTestParticipations = abTests?.participations ?? {};
 
+	const [elementId, setElementId] = useState<number>();
+
+	useEffect(() => {
+		index ??= 0;
+		setElementId(++index);
+	}, []);
+
 	useEffect(() => {
 		const defineConsentState = async () => {
 			const { onConsentChange } = await import(
@@ -200,7 +208,7 @@ export const YoutubeBlockComponent = ({
 	return (
 		<div data-chromatic="ignore" data-component="youtube-atom">
 			<YoutubeAtom
-				elementId={elementId}
+				elementId={elementId ?? '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..169731b59e7 100644
--- a/dotcom-rendering/src/components/YoutubeBlockComponent.stories.tsx
+++ b/dotcom-rendering/src/components/YoutubeBlockComponent.stories.tsx
@@ -50,7 +50,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}
 			/>
@@ -83,7 +82,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}
@@ -118,7 +116,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}
@@ -154,7 +151,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"
@@ -191,7 +187,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={[
@@ -249,7 +244,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}
@@ -308,7 +302,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/liveblogAdSlots.test.ts b/dotcom-rendering/src/lib/liveblogAdSlots.test.ts
index 28696daa6ac..e86b004753c 100644
--- a/dotcom-rendering/src/lib/liveblogAdSlots.test.ts
+++ b/dotcom-rendering/src/lib/liveblogAdSlots.test.ts
@@ -55,7 +55,6 @@ describe('calculateApproximateBlockHeight', () => {
 			_type: 'model.dotcomrendering.pageElements.YoutubeBlockElement',
 			id: '1',
 			assetId: '',
-			elementId: '1',
 			expired: false,
 			mediaTitle: '',
 		},
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx
index e9c328d3d59..2b14b99afcc 100644
--- a/dotcom-rendering/src/lib/renderElement.tsx
+++ b/dotcom-rendering/src/lib/renderElement.tsx
@@ -743,7 +743,6 @@ export const renderElement = ({
 						hideCaption={hideCaption}
 						isMainMedia={isMainMedia}
 						id={element.id}
-						elementId={element.elementId}
 						assetId={element.assetId}
 						expired={element.expired}
 						overrideImage={element.overrideImage}
diff --git a/dotcom-rendering/src/model/article-schema.json b/dotcom-rendering/src/model/article-schema.json
index 153fac988f5..4eab22c5fdc 100644
--- a/dotcom-rendering/src/model/article-schema.json
+++ b/dotcom-rendering/src/model/article-schema.json
@@ -3306,9 +3306,6 @@
                     "type": "string",
                     "const": "model.dotcomrendering.pageElements.YoutubeBlockElement"
                 },
-                "elementId": {
-                    "type": "string"
-                },
                 "assetId": {
                     "type": "string"
                 },
@@ -3358,7 +3355,6 @@
             "required": [
                 "_type",
                 "assetId",
-                "elementId",
                 "expired",
                 "id",
                 "mediaTitle"
@@ -4398,7 +4394,7 @@
                             "type": "string",
                             "const": "Video"
                         },
-                        "elementId": {
+                        "id": {
                             "type": "string"
                         },
                         "videoId": {
@@ -4443,9 +4439,9 @@
                     },
                     "required": [
                         "duration",
-                        "elementId",
                         "expired",
                         "height",
+                        "id",
                         "images",
                         "origin",
                         "title",
diff --git a/dotcom-rendering/src/model/block-schema.json b/dotcom-rendering/src/model/block-schema.json
index 5751e27c6aa..88f9707623c 100644
--- a/dotcom-rendering/src/model/block-schema.json
+++ b/dotcom-rendering/src/model/block-schema.json
@@ -2895,9 +2895,6 @@
                     "type": "string",
                     "const": "model.dotcomrendering.pageElements.YoutubeBlockElement"
                 },
-                "elementId": {
-                    "type": "string"
-                },
                 "assetId": {
                     "type": "string"
                 },
@@ -2947,7 +2944,6 @@
             "required": [
                 "_type",
                 "assetId",
-                "elementId",
                 "expired",
                 "id",
                 "mediaTitle"
diff --git a/dotcom-rendering/src/model/enhanceCards.ts b/dotcom-rendering/src/model/enhanceCards.ts
index a113dadb0bb..bd3ecfb19ee 100644
--- a/dotcom-rendering/src/model/enhanceCards.ts
+++ b/dotcom-rendering/src/model/enhanceCards.ts
@@ -225,7 +225,7 @@ const getActiveMediaAtom = (mediaAtom?: FEMediaAtom): MainMedia | undefined => {
 		if (asset?.platform === 'Youtube') {
 			return {
 				type: 'Video',
-				elementId: mediaAtom.id,
+				id: mediaAtom.id,
 				videoId: asset.id,
 				duration: mediaAtom.duration ?? 0,
 				title: mediaAtom.title,
diff --git a/dotcom-rendering/src/model/front-schema.json b/dotcom-rendering/src/model/front-schema.json
index 9f2dfa8f0af..d646e13dc45 100644
--- a/dotcom-rendering/src/model/front-schema.json
+++ b/dotcom-rendering/src/model/front-schema.json
@@ -3577,7 +3577,7 @@
                             "type": "string",
                             "const": "Video"
                         },
-                        "elementId": {
+                        "id": {
                             "type": "string"
                         },
                         "videoId": {
@@ -3622,9 +3622,9 @@
                     },
                     "required": [
                         "duration",
-                        "elementId",
                         "expired",
                         "height",
+                        "id",
                         "images",
                         "origin",
                         "title",
diff --git a/dotcom-rendering/src/types/content.ts b/dotcom-rendering/src/types/content.ts
index 8f07bd29e7e..c5a9269e30d 100644
--- a/dotcom-rendering/src/types/content.ts
+++ b/dotcom-rendering/src/types/content.ts
@@ -552,7 +552,6 @@ export interface VideoYoutubeBlockElement extends ThirdPartyEmbeddedContent {
 
 export interface YoutubeBlockElement {
 	_type: 'model.dotcomrendering.pageElements.YoutubeBlockElement';
-	elementId: string;
 	assetId: string;
 	mediaTitle: string;
 	id: string;
diff --git a/dotcom-rendering/src/types/mainMedia.ts b/dotcom-rendering/src/types/mainMedia.ts
index dbb21ca7d38..c5ebcb2e7ce 100644
--- a/dotcom-rendering/src/types/mainMedia.ts
+++ b/dotcom-rendering/src/types/mainMedia.ts
@@ -5,7 +5,7 @@ type Media = {
 /** For displaying embedded, playable videos directly in cards */
 type Video = Media & {
 	type: 'Video';
-	elementId: string;
+	id: string;
 	videoId: string;
 	height: number;
 	width: number;

From 59fb1572c184b0fd3c41518fbd35f3baed07736f Mon Sep 17 00:00:00 2001
From: Max Duval <max.duval@theguardian.com>
Date: Wed, 17 Jan 2024 11:47:09 +0000
Subject: [PATCH 2/2] refactor: apply comments from code review

---
 .../YoutubeAtom/YoutubeAtom.stories.tsx       | 56 +++++++++----------
 .../YoutubeAtom/YoutubeAtom.test.tsx          | 18 +++---
 .../components/YoutubeAtom/YoutubeAtom.tsx    | 37 ++++++------
 .../YoutubeBlockComponent.importable.tsx      | 10 ++--
 4 files changed, 60 insertions(+), 61 deletions(-)

diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.stories.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.stories.tsx
index 66e2e9f7f15..57693d70f29 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={123}
+				index={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -83,7 +83,7 @@ export const NoOverlay = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId={123}
+				index={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -118,7 +118,7 @@ export const WithOverrideImage = (): JSX.Element => {
 		<div style={containerStyle}>
 			<OverlayAutoplayExplainer />
 			<YoutubeAtom
-				elementId={123}
+				index={123}
 				videoId="3jpXAMwRSu4"
 				alt="Microscopic image of COVID"
 				eventEmitters={[
@@ -150,7 +150,7 @@ export const WithPosterImage = (): JSX.Element => {
 		<div style={containerStyle}>
 			<OverlayAutoplayExplainer />
 			<YoutubeAtom
-				elementId={123}
+				index={123}
 				videoId="N9Cgy-ke5-s"
 				alt=""
 				eventEmitters={[
@@ -185,7 +185,7 @@ export const WithOverlayAndPosterImage = (): JSX.Element => {
 		<div style={containerStyle}>
 			<OverlayAutoplayExplainer />
 			<YoutubeAtom
-				elementId={123}
+				index={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={123}
+					index={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={123}
+				index={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={123}
+				index={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -328,7 +328,7 @@ export const DuplicateVideos = (): JSX.Element => {
 	return (
 		<div style={containerStyleSmall}>
 			<YoutubeAtom
-				elementId={123}
+				index={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -350,7 +350,7 @@ export const DuplicateVideos = (): JSX.Element => {
 			/>
 			<br />
 			<YoutubeAtom
-				elementId={345}
+				index={345}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -388,7 +388,7 @@ export const MultipleStickyVideos = (): JSX.Element => {
 	return (
 		<div style={{ width: '500px', height: '5000px' }}>
 			<YoutubeAtom
-				elementId={123}
+				index={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -411,7 +411,7 @@ export const MultipleStickyVideos = (): JSX.Element => {
 				adTargeting={adTargeting}
 			/>
 			<YoutubeAtom
-				elementId={456}
+				index={456}
 				videoId="pcMiS6PW8aQ"
 				alt=""
 				eventEmitters={[
@@ -434,7 +434,7 @@ export const MultipleStickyVideos = (): JSX.Element => {
 				adTargeting={adTargeting}
 			/>
 			<YoutubeAtom
-				elementId={789}
+				index={789}
 				videoId="3jpXAMwRSu4"
 				alt=""
 				eventEmitters={[
@@ -469,7 +469,7 @@ export const PausesOffscreen = (): JSX.Element => {
 		<div>
 			<div>Scroll down...</div>
 			<YoutubeAtom
-				elementId={123}
+				index={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -506,7 +506,7 @@ export const NoConsentWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId={123}
+				index={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -534,7 +534,7 @@ export const AdFreeWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId={123}
+				index={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -563,7 +563,7 @@ export const NoOverlayWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId={123}
+				index={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -593,7 +593,7 @@ export const WithOverrideImageWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId={123}
+				index={123}
 				videoId="3jpXAMwRSu4"
 				alt="Microscopic image of COVID"
 				eventEmitters={[
@@ -622,7 +622,7 @@ export const WithPosterImageWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId={123}
+				index={123}
 				videoId="N9Cgy-ke5-s"
 				alt=""
 				eventEmitters={[
@@ -653,7 +653,7 @@ export const WithOverlayAndPosterImageWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyle}>
 			<YoutubeAtom
-				elementId={123}
+				index={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={123}
+					index={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={123}
+				index={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={123}
+				index={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -786,7 +786,7 @@ export const DuplicateVideosWithIma = (): JSX.Element => {
 	return (
 		<div style={containerStyleSmall}>
 			<YoutubeAtom
-				elementId={123}
+				index={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -808,7 +808,7 @@ export const DuplicateVideosWithIma = (): JSX.Element => {
 			/>
 			<br />
 			<YoutubeAtom
-				elementId={345}
+				index={345}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -840,7 +840,7 @@ export const MultipleStickyVideosWithIma = (): JSX.Element => {
 	return (
 		<div style={{ width: '500px', height: '5000px' }}>
 			<YoutubeAtom
-				elementId={123}
+				index={123}
 				videoId="-ZCvZmYlQD8"
 				alt=""
 				eventEmitters={[
@@ -863,7 +863,7 @@ export const MultipleStickyVideosWithIma = (): JSX.Element => {
 				abTestParticipations={{}}
 			/>
 			<YoutubeAtom
-				elementId={456}
+				index={456}
 				videoId="pcMiS6PW8aQ"
 				alt=""
 				eventEmitters={[
@@ -886,7 +886,7 @@ export const MultipleStickyVideosWithIma = (): JSX.Element => {
 				abTestParticipations={{}}
 			/>
 			<YoutubeAtom
-				elementId={789}
+				index={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 0600e3af892..6041513007e 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}
+					index={123}
 					title="My Youtube video!"
 					videoId="ZCvZmYlQD8"
 					alt=""
@@ -58,7 +58,7 @@ describe('YoutubeAtom', () => {
 				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
 			>
 				<YoutubeAtom
-					elementId={123}
+					index={123}
 					title="My Youtube video!"
 					videoId="ZCvZmYlQD8"
 					alt=""
@@ -97,7 +97,7 @@ describe('YoutubeAtom', () => {
 				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
 			>
 				<YoutubeAtom
-					elementId={123}
+					index={123}
 					title="My Youtube video!"
 					videoId="ZCvZmYlQD8"
 					alt=""
@@ -128,7 +128,7 @@ describe('YoutubeAtom', () => {
 				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
 			>
 				<YoutubeAtom
-					elementId={123}
+					index={123}
 					title="My Youtube video!"
 					videoId="ZCvZmYlQD8"
 					alt=""
@@ -161,7 +161,7 @@ describe('YoutubeAtom', () => {
 				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
 			>
 				<YoutubeAtom
-					elementId={123}
+					index={123}
 					title="My Youtube video!"
 					videoId="ZCvZmYlQD8"
 					alt=""
@@ -192,7 +192,7 @@ describe('YoutubeAtom', () => {
 				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
 			>
 				<YoutubeAtom
-					elementId={123}
+					index={123}
 					title="My Youtube video!"
 					videoId="ZCvZmYlQD8"
 					alt=""
@@ -222,7 +222,7 @@ describe('YoutubeAtom', () => {
 				value={{ renderingTarget: 'Web', darkModeAvailable: false }}
 			>
 				<YoutubeAtom
-					elementId={123}
+					index={123}
 					title="My Youtube video!"
 					videoId="ZCvZmYlQD8"
 					alt=""
@@ -256,7 +256,7 @@ describe('YoutubeAtom', () => {
 					value={{ renderingTarget: 'Web', darkModeAvailable: false }}
 				>
 					<YoutubeAtom
-						elementId={123}
+						index={123}
 						title="My Youtube video!"
 						videoId="ZCvZmYlQD8"
 						alt=""
@@ -274,7 +274,7 @@ describe('YoutubeAtom', () => {
 						abTestParticipations={{}}
 					/>
 					<YoutubeAtom
-						elementId={123}
+						index={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 96f37955e63..957ad44d268 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, useEffect, useState } from 'react';
+import { type ArticleFormat, isUndefined } from '@guardian/libs';
+import { useCallback, 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 = {
+	index?: number;
 	videoId: string;
-	elementId: 'server' | number;
 	overrideImage?: string | undefined;
 	posterImage?: string | undefined;
 	adTargeting?: AdTargeting;
@@ -46,7 +46,7 @@ type Props = {
 };
 
 export const YoutubeAtom = ({
-	elementId,
+	index,
 	videoId,
 	overrideImage,
 	posterImage,
@@ -75,7 +75,7 @@ export const YoutubeAtom = ({
 	const [isClosed, setIsClosed] = useState<boolean>(false);
 	const [pauseVideo, setPauseVideo] = useState<boolean>(false);
 
-	const uniqueId = `${videoId}-${elementId}`;
+	const uniqueId = `${videoId}-${index ?? 'server'}`;
 	const enableIma =
 		imaEnabled &&
 		!!adTargeting &&
@@ -134,21 +134,20 @@ export const YoutubeAtom = ({
 	 */
 	const showPlaceholder = (!hasOverlay || overlayClicked) && !playerReady;
 
-	const [loadPlayer, setLoadPlayer] = useState<boolean>(false);
-	useEffect(() => {
-		if (elementId === 'server') {
-			// We may never load the player on the server
-			return;
-		}
+	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;
+	}
 
-		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]);
+	if (isUndefined(index)) {
+		loadPlayer = false;
+	}
 
 	/**
 	 * 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 f12addb755b..c96d1fc003f 100644
--- a/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
+++ b/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
@@ -87,7 +87,7 @@ const getLargestImageSize = (
 ) => [...images].sort((a, b) => a.width - b.width).pop();
 
 /** always undefined on the server */
-let index: number | undefined;
+let counter: number | undefined;
 
 export const YoutubeBlockComponent = ({
 	id,
@@ -122,11 +122,11 @@ export const YoutubeBlockComponent = ({
 		abTestsApi?.isUserInVariant('IntegrateIma', 'variant') ?? false;
 	const abTestParticipations = abTests?.participations ?? {};
 
-	const [elementId, setElementId] = useState<number>();
+	const [index, setIndex] = useState<number>();
 
 	useEffect(() => {
-		index ??= 0;
-		setElementId(++index);
+		counter ??= 0;
+		setIndex(++counter);
 	}, []);
 
 	useEffect(() => {
@@ -208,7 +208,7 @@ export const YoutubeBlockComponent = ({
 	return (
 		<div data-chromatic="ignore" data-component="youtube-atom">
 			<YoutubeAtom
-				elementId={elementId ?? 'server'}
+				index={index}
 				videoId={assetId}
 				overrideImage={overrideImage}
 				posterImage={getLargestImageSize(posterImage)?.url}