Use CORS if not in stories only

Author: domlander

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 */
@@ -162,6 +163,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 			AudioIcon,
 			preloadPartialData,
 			showPlayIcon,
+			enableCors = true,
 			subtitleSource,
 			subtitleSize,
 			activeCue,
@@ -183,16 +185,6 @@ export const SelfHostedVideoPlayer = forwardRef(
 			showPlayIcon ? 'play' : 'pause'
 		}-${atomId}`;
 
-		/**
-		 * To show subtitles, CORS must be enabled as it allows access to the VTT file.
-		 *
-		 * CORS should be enabled in production so that requests are consistent with respect to CORS.
-		 * If a client requests a video without CORS, then later made a request to the same video with
-		 * CORS, then this request could fail as the response could be cached without the headers.
-		 */
-		const requestCORS =
-			showSubtitles || process.env.NODE_ENV === 'production';
-
 		return (
 			<>
 				{/* eslint-disable-next-line jsx-a11y/media-has-caption -- Not all videos require captions. */}
@@ -202,7 +194,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 						videoStyles(width, height),
 						showSubtitles && subtitleStyles(subtitleSize),
 					]}
-					crossOrigin={requestCORS ? 'anonymous' : undefined}
+					crossOrigin={enableCors ? 'anonymous' : undefined}
 					ref={ref}
 					tabIndex={0}
 					data-testid="self-hosted-video-player"