Show native subtitles when the video is fullscreen

Author: abeddow91

dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx

@@ -1,10 +1,5 @@
 import { css } from '@emotion/react';
-import {
-	space,
-	textSans15,
-	textSans17,
-	textSans20,
-} from '@guardian/source/foundations';
+import { space } from '@guardian/source/foundations';
 import type { IconProps } from '@guardian/source/react-components';
 import type { ReactElement, SyntheticEvent } from 'react';
 import { forwardRef } from 'react';
@@ -38,15 +33,21 @@ const interactiveStyles = css`
 	cursor: pointer;
 `;
 
-const subtitleStyles = (subtitleSize: SubtitleSize | undefined) => css`
+const nativeSubtitleStyles = css`
 	::cue {
 		/* Hide the cue by default as we prefer custom overlay */
 		visibility: hidden;
-
 		color: ${palette('--video-subtitle-text')};
-		${subtitleSize === 'small' && textSans15};
-		${subtitleSize === 'medium' && textSans17};
-		${subtitleSize === 'large' && textSans20};
+	}
+
+	/* Display the native cues when in fullscreen */
+
+	&:fullscreen::cue {
+		visibility: visible;
+	}
+
+	&:-webkit-full-screen::cue {
+		visibility: visible;
 	}
 `;
 
@@ -206,7 +207,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 					css={[
 						videoStyles(aspectRatio),
 						isInteractive && interactiveStyles,
-						showSubtitles && subtitleStyles(subtitleSize),
+						showSubtitles && nativeSubtitleStyles,
 					]}
 					crossOrigin="anonymous"
 					ref={ref}