diff --git a/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx b/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx index 5507e398d86..255b8b8d1f6 100644 --- a/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx +++ b/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} diff --git a/dotcom-rendering/src/components/SelfHostedVideo.stories.tsx b/dotcom-rendering/src/components/SelfHostedVideo.stories.tsx index 1a993222bf5..5053e1fb8bd 100644 --- a/dotcom-rendering/src/components/SelfHostedVideo.stories.tsx +++ b/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: diff --git a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx index 0ed3bea3a29..0b0d29aec3e 100644 --- a/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx +++ b/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" diff --git a/dotcom-rendering/src/layouts/FrontLayout.tsx b/dotcom-rendering/src/layouts/FrontLayout.tsx index 97a212e9f08..311d3ae58d9 100644 --- a/dotcom-rendering/src/layouts/FrontLayout.tsx +++ b/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