Add looping video card story to flexible containers.

Author: domlander

dotcom-rendering/fixtures/manual/trails.ts

@@ -600,3 +600,24 @@ export const videoTrails: [DCRFrontCard, DCRFrontCard] = [
 		},
 	},
 ];
+
+export const loopVideoCard: DCRFrontCard = {
+	...defaultCardProps,
+	dataLinkName: 'news | group-0 | card-@2',
+	url: '/uk-news/2025/jan/22/prince-harry-says-sun-publisher-made-historic-admission-as-he-settles-case',
+	headline: 'Headline for looping video card',
+	trailText: 'Trail text for looping video card',
+	mainMedia: {
+		type: 'LoopVideo',
+		atomId: '3cb22b60-2c3f-48d6-8bce-38c956907cce',
+		videoId:
+			'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
+		duration: 0,
+		width: 500,
+		height: 400,
+	},
+	image: {
+		src: 'https://media.guim.co.uk/966bf085fb982b1103aaba42a812b09726cc0a3c/1417_104_1378_1104/master/1378.jpg',
+		altText: 'Wyatt Russell and Florence Pugh in Thunderbolts*.',
+	},
+};

dotcom-rendering/src/components/FlexibleGeneral.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
 import {
 	getSublinks,
+	loopVideoCard,
 	opinionTrails,
 	trails,
 } from '../../fixtures/manual/trails';
@@ -546,3 +547,15 @@ export const ImmersiveCardsSplashAndStandard: Story = {
 		},
 	},
 };
+
+export const LoopVideoCards: Story = {
+	name: 'Looping video cards',
+	args: {
+		frontSectionTitle: 'Loop video cards',
+		groupedTrails: {
+			...emptyGroupedTrails,
+			splash: [loopVideoCard],
+			standard: [loopVideoCard], // Loop video is disabled at standard card size
+		},
+	},
+};

dotcom-rendering/src/components/FlexibleSpecial.stories.tsx

@@ -1,7 +1,7 @@
 import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react';
 import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
-import { trails } from '../../fixtures/manual/trails';
+import { loopVideoCard, trails } from '../../fixtures/manual/trails';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import type {
 	DCRContainerPalette,
@@ -261,6 +261,19 @@ export const GigaBoostedSplashWithLiveUpdates: Story = {
 	},
 };
 
+export const LoopVideoCards: Story = {
+	name: 'Looping video cards',
+	args: {
+		frontSectionTitle: 'Looping video',
+		groupedTrails: {
+			...emptyGroupedTrails,
+			snap: [loopVideoCard],
+			standard: [loopVideoCard],
+		},
+		collectionId: 1,
+	},
+};
+
 const containerPalettes = [
 	'InvestigationPalette',
 	'LongRunningPalette',