Merge pull request #15056 from guardian/fix-aspect-ratio

Support full-width looping videos in articles

Author: simonbyford

dotcom-rendering/src/components/Card/Card.tsx

@@ -1013,6 +1013,7 @@ export const Card = ({
 									}
 									subtitleSize={subtitleSize}
 									enableHls={enableHls}
+									letterboxed={true}
 								/>
 							</Island>
 						)}

dotcom-rendering/src/components/LoopVideoInArticle.tsx

@@ -29,6 +29,17 @@ export const LoopVideoInArticle = ({
 		return null;
 	}
 
+	const calculateAspectRatio = (): number => {
+		const dimensions = firstVideoAsset?.dimensions;
+
+		if (dimensions) {
+			return dimensions.width / dimensions.height;
+		}
+
+		// Default aspect ratio if dimensions are not available
+		return 5 / 4;
+	};
+
 	return (
 		<>
 			<Island priority="critical" defer={{ until: 'visible' }}>
@@ -39,6 +50,7 @@ export const LoopVideoInArticle = ({
 					fallbackImageAspectRatio={
 						(firstVideoAsset?.aspectRatio ?? '5:4') as FEAspectRatio
 					}
+					containerAspectRatio={calculateAspectRatio()}
 					fallbackImageLoading="lazy"
 					fallbackImageSize="small"
 					height={firstVideoAsset?.dimensions?.height ?? 400}

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

@@ -55,20 +55,23 @@ const videoContainerStyles = (
 	}
 `;
 
-const figureStyles = (aspectRatio: number) => css`
+const figureStyles = (aspectRatio: number, letterboxed: boolean) => css`
 	position: relative;
 	aspect-ratio: ${aspectRatio};
 	height: 100%;
-	max-height: 100vh;
-	max-height: 100svh;
-	max-width: 100%;
-	${from.tablet} {
-		/**
-		 * The value "80" is derived from the aspect ratio of the 5:4 slot.
-		 * When other slots are used for self-hosted videos, this will need to be adjusted.
-		 */
-		max-width: ${aspectRatio * 80}%;
-	}
+	${letterboxed &&
+	css`
+		max-height: 100vh;
+		max-height: 100svh;
+		max-width: 100%;
+		${from.tablet} {
+			/**
+			 * The value "80" is derived from the aspect ratio of the 5:4 slot.
+			 * When other slots are used for self-hosted videos, this will need to be adjusted.
+			 */
+			max-width: ${aspectRatio * 80}%;
+		}
+	`}
 `;
 
 /**
@@ -150,6 +153,7 @@ type Props = {
 	subtitleSource?: string;
 	subtitleSize: SubtitleSize;
 	enableHls: boolean;
+	letterboxed?: boolean;
 };
 
 export const SelfHostedVideo = ({
@@ -170,6 +174,7 @@ export const SelfHostedVideo = ({
 	subtitleSource,
 	subtitleSize,
 	enableHls,
+	letterboxed = false,
 }: Props) => {
 	const adapted = useShouldAdapt();
 	const { renderingTarget } = useConfig();
@@ -703,7 +708,7 @@ export const SelfHostedVideo = ({
 		>
 			<figure
 				ref={setNode}
-				css={figureStyles(aspectRatio)}
+				css={figureStyles(aspectRatio, letterboxed)}
 				className={`video-container ${videoStyle.toLocaleLowerCase()}`}
 				data-component="gu-video-loop"
 			>
@@ -737,6 +742,7 @@ export const SelfHostedVideo = ({
 					subtitleSize={subtitleSize}
 					activeCue={activeCue}
 					enableHls={enableHls}
+					letterboxed={letterboxed}
 				/>
 			</figure>
 		</div>

dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx

@@ -23,13 +23,16 @@ import { VideoProgressBar } from './VideoProgressBar';
 
 export type SubtitleSize = 'small' | 'medium' | 'large';
 
-const videoStyles = (aspectRatio: number) => css`
+const videoStyles = (aspectRatio: number, letterboxed: boolean) => css`
 	position: relative;
 	display: block;
 	height: auto;
 	width: 100%;
-	max-height: 100vh;
-	max-height: 100svh;
+	${letterboxed &&
+	css`
+		max-height: 100vh;
+		max-height: 100svh;
+	`}
 	cursor: pointer;
 	/* Prevents CLS by letting the browser know the space the video will take up. */
 	aspect-ratio: ${aspectRatio};
@@ -127,6 +130,7 @@ type Props = {
 	/* used in custom subtitle overlays */
 	activeCue?: ActiveCue | null;
 	enableHls: boolean;
+	letterboxed: boolean;
 };
 
 /**
@@ -169,6 +173,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 			subtitleSize,
 			activeCue,
 			enableHls,
+			letterboxed,
 		}: Props,
 		ref: React.ForwardedRef<HTMLVideoElement>,
 	) => {
@@ -199,7 +204,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 				<video
 					id={videoId}
 					css={[
-						videoStyles(aspectRatio),
+						videoStyles(aspectRatio, letterboxed),
 						showSubtitles && subtitleStyles(subtitleSize),
 					]}
 					crossOrigin="anonymous"