diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index 47811af5c5c..ce2d9114593 100644
--- a/dotcom-rendering/src/components/Card/Card.tsx
+++ b/dotcom-rendering/src/components/Card/Card.tsx
@@ -13,6 +13,7 @@ import {
} from '../../lib/articleFormat';
import { isMediaCard } from '../../lib/cardHelpers';
import { isWithinTwelveHours, secondsToDuration } from '../../lib/formatTime';
+import { appendLinkNameMedia } from '../../lib/getDataLinkName';
import { getZIndex } from '../../lib/getZIndex';
import { DISCUSSION_ID_DATA_ATTRIBUTE } from '../../lib/useCommentCount';
import { BETA_CONTAINERS } from '../../model/enhanceCollections';
@@ -268,7 +269,7 @@ const getMedia = ({
}
if (mainMedia?.type === 'Video' && canPlayInline) {
return {
- type: 'video',
+ type: 'youtube-video',
mainMedia,
} as const;
}
@@ -566,6 +567,11 @@ export const Card = ({
isBetaContainer,
});
+ const resolvedDataLinkName =
+ media && dataLinkName
+ ? appendLinkNameMedia(dataLinkName, media.type)
+ : dataLinkName;
+
/**
* For opinion type cards with avatars (which aren't onwards content)
* we render the footer in a different location
@@ -757,7 +763,7 @@ export const Card = ({
{headlinePosition === 'outer' && (
@@ -899,7 +905,7 @@ export const Card = ({
/>
)}
- {media.type === 'video' && (
+ {media.type === 'youtube-video' && (
<>
{showVideo ? (
{
if (imageType === 'avatar') {
@@ -115,7 +115,7 @@ const getImageDirection = (
type Props = {
children: React.ReactNode;
- imageType?: CardImageType;
+ imageType?: CardMediaType;
imageSize: ImageSizeType;
isBetaContainer: boolean;
imagePositionOnDesktop: ImagePositionType;
diff --git a/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx b/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx
index 259a7207e46..ea4f08cf61c 100644
--- a/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx
+++ b/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx
@@ -1,7 +1,7 @@
import type { SerializedStyles } from '@emotion/react';
import { css } from '@emotion/react';
import { between, from, space, until } from '@guardian/source/foundations';
-import type { CardImageType } from '../../../types/layout';
+import type { CardMediaType } from '../../../types/layout';
const imageFixedSize = {
tiny: 86,
@@ -34,7 +34,7 @@ type Props = {
children: React.ReactNode;
imageSize: ImageSizeType;
imageFixedSizes?: ImageFixedSizeOptions;
- imageType?: CardImageType;
+ imageType?: CardMediaType;
imagePositionOnDesktop: ImagePositionType;
imagePositionOnMobile: ImagePositionType;
/**
@@ -173,7 +173,7 @@ export const ImageWrapper = ({
css={[
(imageType === 'slideshow' ||
imageType === 'picture' ||
- imageType === 'video' ||
+ imageType === 'youtube-video' ||
imageType === 'loop-video') &&
isHorizontalOnDesktop &&
flexBasisStyles({
diff --git a/dotcom-rendering/src/lib/getDataLinkName.ts b/dotcom-rendering/src/lib/getDataLinkName.ts
index d6473069582..1a0ba009975 100644
--- a/dotcom-rendering/src/lib/getDataLinkName.ts
+++ b/dotcom-rendering/src/lib/getDataLinkName.ts
@@ -1,5 +1,5 @@
import type { FEFrontCardStyle } from '../frontend/feFront';
-import type { RichLinkCardType } from '../types/layout';
+import type { CardMediaType, RichLinkCardType } from '../types/layout';
import {
ArticleDesign,
type ArticleFormat,
@@ -58,6 +58,7 @@ export type Group = `${number}` | `${number}+`;
*
* @see {JSX.IntrinsicAttributes}
*/
+
export const getDataLinkNameCard = (
format: ArticleFormat,
group: Group,
@@ -69,3 +70,12 @@ export const getDataLinkNameCard = (
`group-${group}`,
`card-@${Math.max(index + 1, 1)}`,
].join(' | ');
+
+type MediaType = CardMediaType | 'none';
+
+export const appendLinkNameMedia = (
+ dataLinkName: string,
+ mediaType: MediaType,
+): string => {
+ return `${dataLinkName} | media-${mediaType}`;
+};
diff --git a/dotcom-rendering/src/types/layout.ts b/dotcom-rendering/src/types/layout.ts
index ef1a4dccf13..1b9a6c1fe7c 100644
--- a/dotcom-rendering/src/types/layout.ts
+++ b/dotcom-rendering/src/types/layout.ts
@@ -21,12 +21,12 @@ export type RichLinkCardType =
| 'external'
| 'news';
-export type CardImageType =
+export type CardMediaType =
| 'picture'
| 'avatar'
| 'crossword'
| 'slideshow'
- | 'video'
+ | 'youtube-video'
| 'loop-video'
| 'podcast';