Set up layout for hosted video pages

dotcom-rendering/src/layouts/DecideLayout.tsx

@@ -9,6 +9,7 @@ import { FullPageInteractiveLayout } from './FullPageInteractiveLayout';
 import { GalleryLayout } from './GalleryLayout';
 import { HostedArticleLayout } from './HostedArticleLayout';
 import { HostedGalleryLayout } from './HostedGalleryLayout';
+import { HostedVideoLayout } from './HostedVideoLayout';
 import { ImmersiveLayout } from './ImmersiveLayout';
 import { InteractiveLayout } from './InteractiveLayout';
 import { LiveLayout } from './LiveLayout';
@@ -363,14 +364,21 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => {
 						/>
 					);
 				case ArticleDesign.HostedArticle:
-				case ArticleDesign.HostedVideo:
 					return (
 						<HostedArticleLayout
 							content={article}
 							format={format}
 							renderingTarget={renderingTarget}
 						/>
 					);
+				case ArticleDesign.HostedVideo:
+					return (
+						<HostedVideoLayout
+							content={article}
+							format={format}
+							renderingTarget={renderingTarget}
+						/>
+					);
 				case ArticleDesign.HostedGallery:
 					return (
 						<HostedGalleryLayout

dotcom-rendering/src/layouts/HostedVideoLayout.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { allModes } from '../../.storybook/modes';
+import { hostedVideo } from '../../fixtures/manual/hostedVideo';
+import {
+	ArticleDesign,
+	ArticleDisplay,
+	ArticleSpecial,
+} from '../lib/articleFormat';
+import { enhanceArticleType } from '../types/article';
+import { HostedVideoLayout } from './HostedVideoLayout';
+
+const meta = {
+	title: 'Layouts/HostedVideo',
+	component: HostedVideoLayout,
+	parameters: {
+		chromatic: {
+			modes: {
+				'light leftCol': allModes['light leftCol'],
+			},
+		},
+	},
+} satisfies Meta<typeof HostedVideoLayout>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const format = {
+	theme: ArticleSpecial.Labs,
+	design: ArticleDesign.HostedVideo,
+	display: ArticleDisplay.Standard,
+};
+
+export const Apps = {
+	args: {
+		content: enhanceArticleType(hostedVideo, 'Apps'),
+		format,
+		renderingTarget: 'Apps',
+	},
+	parameters: {
+		config: {
+			renderingTarget: 'Apps',
+			darkModeAvailable: true,
+		},
+		chromatic: {
+			modes: {
+				'light mobileMedium': allModes['light mobileMedium'],
+			},
+		},
+	},
+} satisfies Story;
+
+export const Web = {
+	args: {
+		content: enhanceArticleType(hostedVideo, 'Web'),
+		format,
+		renderingTarget: 'Web',
+	},
+	parameters: {
+		config: {
+			renderingTarget: 'Web',
+		},
+	},
+} satisfies Story;