Add better videos to stories

Author: domlander

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

@@ -379,7 +379,7 @@ export const WithSublinksLabsImmersive: Story = {
 	},
 };
 
-export const WithSelfHostedVideo: Story = {
+export const WithSelfHostedVideo = {
 	args: {
 		...cardProps,
 		showVideo: true,
@@ -389,20 +389,31 @@ export const WithSelfHostedVideo: Story = {
 			atomId: 'atom-id-123',
 			sources: [
 				{
-					src: 'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
+					src: 'https://uploads.guim.co.uk/2025/11/27/4_5_Test--1d34df3e-8c92-4090-8bb6-d79fc7fb9467-1.0.mp4',
 					mimeType: 'video/mp4',
 				},
 			],
-			width: 900,
+			width: 576,
 			height: 720,
 			duration: 18,
 		},
 	},
-};
+} satisfies Story;
 
-export const WithSelfHostedImmersiveVideo: Story = {
+export const WithSelfHostedImmersiveVideo = {
 	args: {
 		...WithSelfHostedVideo.args,
-		isImmersive: true,
+		...Immersive.args,
+		mainMedia: {
+			...WithSelfHostedVideo.args.mainMedia,
+			sources: [
+				{
+					src: 'https://uploads.guim.co.uk/2025/11/27/5_3_Test--26763e61-c16b-4c10-8c16-3f11882da154-1.0.mp4',
+					mimeType: 'video/mp4',
+				},
+			],
+			width: 1200,
+			height: 720,
+		},
 	},
-};
+} satisfies Story;

dotcom-rendering/src/components/FeatureCard.tsx

@@ -535,7 +535,9 @@ export const FeatureCard = ({
 											fallbackImageAlt={
 												media.imageAltText
 											}
-											fallbackImageAspectRatio="5:4"
+											fallbackImageAspectRatio={
+												isImmersive ? '5:3' : '4:5'
+											}
 											linkTo={linkTo}
 											subtitleSource={
 												media.mainMedia.subtitleSource