Re-enable self-hosted video stories

dotcom-rendering/src/components/SelfHostedVideo.importable.tsx

@@ -140,6 +140,10 @@ type Props = {
 	fallbackImageAlt: CardPictureProps['alt'];
 	fallbackImageAspectRatio: CardPictureProps['aspectRatio'];
 	linkTo: string;
+	/**
+	 * If CORS are enabled, the video request will include CORS headers.
+	 */
+	enableCors?: boolean;
 	subtitleSource?: string;
 	subtitleSize: SubtitleSize;
 };
@@ -158,6 +162,7 @@ export const SelfHostedVideo = ({
 	fallbackImageAlt,
 	fallbackImageAspectRatio,
 	linkTo,
+	enableCors = true,
 	subtitleSource,
 	subtitleSize,
 }: Props) => {
@@ -706,6 +711,7 @@ export const SelfHostedVideo = ({
 					AudioIcon={hasAudio ? AudioIcon : null}
 					preloadPartialData={preloadPartialData}
 					showPlayIcon={showPlayIcon}
+					enableCors={enableCors}
 					subtitleSource={subtitleSource}
 					subtitleSize={subtitleSize}
 					activeCue={activeCue}

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

@@ -32,6 +32,7 @@ export const Loop5to4: Story = {
 		uniqueId: 'test-video-1',
 		atomId: 'test-atom-1',
 		videoStyle: 'Loop',
+		enableCors: false,
 		height: 720,
 		width: 900,
 		posterImage:

dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx

@@ -122,6 +122,7 @@ type Props = {
 	posterImage?: string;
 	preloadPartialData: boolean;
 	showPlayIcon: boolean;
+	enableCors?: boolean;
 	subtitleSource?: string;
 	subtitleSize?: SubtitleSize;
 	/* used in custom subtitle overlays */
@@ -131,12 +132,10 @@ type Props = {
 /**
  * Note that in React 19, forwardRef is no longer necessary:
  * https://react.dev/reference/react/forwardRef
- */
-/**
+ *
  * NB: To develop the video player locally, use `https://r.thegulocal.com/` instead of `localhost`.
  * This is required because CORS restrictions prevent accessing the subtitles and video file from localhost.
  */
-
 export const SelfHostedVideoPlayer = forwardRef(
 	(
 		{
@@ -164,6 +163,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 			AudioIcon,
 			preloadPartialData,
 			showPlayIcon,
+			enableCors = true,
 			subtitleSource,
 			subtitleSize,
 			activeCue,
@@ -194,7 +194,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 						videoStyles(width, height),
 						showSubtitles && subtitleStyles(subtitleSize),
 					]}
-					crossOrigin="anonymous"
+					crossOrigin={enableCors ? 'anonymous' : undefined}
 					ref={ref}
 					tabIndex={0}
 					data-testid="self-hosted-video-player"

dotcom-rendering/src/layouts/FrontLayout.tsx

@@ -139,7 +139,8 @@ export const FrontLayout = ({ front, NAV }: Props) => {
 
 	const contributionsServiceUrl = getContributionsServiceUrl(front);
 
-	/** We allow the labs redesign to be shown if:
+	/**
+	 * We allow the labs redesign to be shown if:
 	 * - the feature switch is ON
 	 * OR
 	 * - the user is opted into the 0% server side test