Set aspect ratio of containers to prevent CLS

Author: domlander

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

@@ -1001,6 +1001,7 @@ export const Card = ({
 									width={media.mainMedia.width}
 									videoStyle={media.mainMedia.videoStyle}
 									posterImage={media.mainMedia.image ?? ''}
+									containerAspectRatio={5 / 4}
 									fallbackImage={media.mainMedia.image ?? ''}
 									fallbackImageSize={mediaSize}
 									fallbackImageLoading={imageLoading}

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

@@ -30,22 +30,43 @@ import type {
 import { SelfHostedVideoPlayer } from './SelfHostedVideoPlayer';
 import { ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
 
-const videoAndBackgroundStyles = (isCinemagraph: boolean) => css`
+const videoContainerStyles = (
+	isCinemagraph: boolean,
+	videoAspectRatio: number,
+	aspectRatio?: number, // The aspect ratio of the container
+) => css`
 	position: relative;
 	display: flex;
 	justify-content: space-around;
 	background-color: ${palette('--video-background')};
 	${!isCinemagraph && `z-index: ${getZIndex('video-container')}`};
+
+	/**
+	 * If the video and its containing slot have different dimensions, the slot will use the aspect
+	 * ratio of the video on mobile, so that the video can take up the full width of the screen.
+	 *
+	 * From tablet breakpoints, the aspect ratio of the slot is maintained, for consistency with other content.
+	 * This will result in grey bars on either side of the video if the video is narrower than the slot.
+	 */
+	aspect-ratio: ${videoAspectRatio};
+	${from.tablet} {
+		${typeof aspectRatio === 'number' && `aspect-ratio: ${aspectRatio};`}
+	}
 `;
 
-const videoContainerStyles = (width: number, height: number) => css`
+const figureStyles = (aspectRatio: number) => css`
 	position: relative;
+	aspect-ratio: ${aspectRatio};
 	height: 100%;
 	max-height: 100vh;
 	max-height: 100svh;
 	max-width: 100%;
 	${from.tablet} {
-		max-width: ${(width / height) * 80}%;
+		/**
+		 * 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}%;
 	}
 `;
 
@@ -113,6 +134,12 @@ type Props = {
 	width: number;
 	videoStyle: VideoPlayerFormat;
 	posterImage: string;
+	/**
+	 * The desired aspect ratio of the container of the video, which can differ from the
+	 * aspect ratio of the video itself. Only applied from the tablet breakpoint, as below this
+	 * breakpoint, the video always takes up the full width of the screen.
+	 */
+	containerAspectRatio?: number;
 	fallbackImage: CardPictureProps['mainImage'];
 	fallbackImageSize: CardPictureProps['imageSize'];
 	fallbackImageLoading: CardPictureProps['loading'];
@@ -132,6 +159,7 @@ export const SelfHostedVideo = ({
 	width: expectedWidth,
 	videoStyle,
 	posterImage,
+	containerAspectRatio,
 	fallbackImage,
 	fallbackImageSize,
 	fallbackImageLoading,
@@ -656,17 +684,25 @@ export const SelfHostedVideo = ({
 		}
 	};
 
+	const aspectRatio = width / height;
+
 	const AudioIcon = isMuted ? SvgAudioMute : SvgAudio;
 
 	const optimisedPosterImage = showPosterImage
 		? getOptimisedPosterImage(posterImage)
 		: undefined;
 
 	return (
-		<div css={videoAndBackgroundStyles(isCinemagraph)}>
+		<div
+			css={videoContainerStyles(
+				isCinemagraph,
+				aspectRatio,
+				containerAspectRatio,
+			)}
+		>
 			<figure
 				ref={setNode}
-				css={videoContainerStyles(width, height)}
+				css={figureStyles(aspectRatio)}
 				className={`video-container ${videoStyle.toLocaleLowerCase()}`}
 				data-component="gu-video-loop"
 			>

dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx

@@ -23,7 +23,7 @@ import { VideoProgressBar } from './VideoProgressBar';
 
 export type SubtitleSize = 'small' | 'medium' | 'large';
 
-const videoStyles = (width: number, height: number) => css`
+const videoStyles = (aspectRatio: number) => css`
 	position: relative;
 	display: block;
 	height: auto;
@@ -32,7 +32,7 @@ const videoStyles = (width: number, height: number) => css`
 	max-height: 100svh;
 	cursor: pointer;
 	/* Prevents CLS by letting the browser know the space the video will take up. */
-	aspect-ratio: ${width} / ${height};
+	aspect-ratio: ${aspectRatio};
 `;
 
 const subtitleStyles = (subtitleSize: SubtitleSize | undefined) => css`
@@ -191,13 +191,15 @@ export const SelfHostedVideoPlayer = forwardRef(
 			? sources
 			: filterOutHlsSources(sources);
 
+		const aspectRatio = width / height;
+
 		return (
 			<>
 				{/* eslint-disable-next-line jsx-a11y/media-has-caption -- Not all videos require captions. */}
 				<video
 					id={videoId}
 					css={[
-						videoStyles(width, height),
+						videoStyles(aspectRatio),
 						showSubtitles && subtitleStyles(subtitleSize),
 					]}
 					crossOrigin="anonymous"