Card pill with self hosted video main media (#15339)

* Let card footer render a pill for cards with a self hosted video as main media

* Reuse WithSelfHostedVideoOnGallery main media object to prevent repetition

Author: abeddow91

dotcom-rendering/src/components/Card/components/CardFooter.stories.tsx

@@ -68,6 +68,58 @@ export const WithVideo = {
 	},
 } satisfies Story;
 
+export const WithSelfHostedVideoOnGallery = {
+	...WithGallery,
+	args: {
+		...WithGallery.args,
+		format: {
+			display: ArticleDisplay.Standard,
+			design: ArticleDesign.Gallery,
+			theme: Pillar.Opinion,
+		},
+		mainMedia: {
+			type: 'SelfHostedVideo',
+			videoStyle: 'Loop',
+			atomId: 'atom-id-123',
+			sources: [
+				{
+					src: 'https://uploads.guim.co.uk/2026/01/09/Front_loop__Iran_TiF_Latest--64220ebf-d63d-48dd-9317-16b3b150a4ac-1.1.m3u8',
+					mimeType: 'application/vnd.apple.mpegurl',
+				},
+			],
+			height: 720,
+			width: 576,
+			duration: 18,
+		},
+	},
+} satisfies Story;
+
+export const WithSelfHostedVideoOnAudio = {
+	...WithAudio,
+	args: {
+		...WithAudio.args,
+		format: {
+			display: ArticleDisplay.Standard,
+			design: ArticleDesign.Audio,
+			theme: Pillar.Opinion,
+		},
+		mainMedia: WithSelfHostedVideoOnGallery.args.mainMedia,
+	},
+} satisfies Story;
+
+export const WithSelfHostedVideoOnVideo = {
+	...WithVideo,
+	args: {
+		...WithVideo.args,
+		format: {
+			display: ArticleDisplay.Standard,
+			design: ArticleDesign.Video,
+			theme: Pillar.Opinion,
+		},
+		mainMedia: WithSelfHostedVideoOnGallery.args.mainMedia,
+	},
+} satisfies Story;
+
 export const WithNewsletter = {
 	...WithAge,
 	args: {

dotcom-rendering/src/components/Card/components/CardFooter.tsx

@@ -81,6 +81,7 @@ export const CardFooter = ({
 		mainMedia?.type === 'YoutubeVideo' ||
 		mainMedia?.type === 'Audio' ||
 		mainMedia?.type === 'Gallery' ||
+		mainMedia?.type === 'SelfHostedVideo' ||
 		isNewsletter;
 
 	if (shouldShowPill) {