5:4 video images

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

@@ -674,6 +674,7 @@ export const Card = ({
 														: imageSize
 												}
 												enableAds={false}
+												aspectRatio={aspectRatio}
 											/>
 										</Island>
 									</div>

dotcom-rendering/src/components/MaintainAspectRatio.tsx

@@ -1,29 +1,42 @@
 import { css } from '@emotion/react';
+import type { AspectRatio } from './CardPicture';
 
 type Props = {
 	height: number;
 	width: number;
+	aspectRatio?: AspectRatio;
 	children: React.ReactNode;
 };
 
-export const MaintainAspectRatio = ({ height, width, children }: Props) => (
+export const MaintainAspectRatio = ({
+	height,
+	width,
+	aspectRatio,
+	children,
+}: Props) => {
 	/* https://css-tricks.com/aspect-ratio-boxes/ */
-	<div
-		css={css`
-			/* position relative to contain the absolutely positioned iframe plus any Overlay image */
-			position: relative;
-			padding-bottom: ${(height / width) * 100}%;
+	const paddingBottom =
+		aspectRatio === '5:4'
+			? `${(4 / 5) * 100}%`
+			: `${(height / width) * 100}%`;
 
-			& > iframe,
-			& > video {
-				width: 100%;
-				height: 100%;
-				position: absolute;
-				top: 0;
-				left: 0;
-			}
-		`}
-	>
-		{children}
-	</div>
-);
+	return (
+		<div
+			css={css`
+				/* position relative to contain the absolutely positioned iframe plus any Overlay image */
+				position: relative;
+				padding-bottom: ${paddingBottom};
+				& > iframe,
+				& > video {
+					width: 100%;
+					height: 100%;
+					position: absolute;
+					top: 0;
+					left: 0;
+				}
+			`}
+		>
+			{children}
+		</div>
+	);
+};

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

@@ -7,6 +7,7 @@ import type {
 	ImagePositionType,
 	ImageSizeType,
 } from '../Card/components/ImageWrapper';
+import type { AspectRatio } from '../CardPicture';
 import { MaintainAspectRatio } from '../MaintainAspectRatio';
 import type { VideoCategory } from './YoutubeAtomOverlay';
 import { YoutubeAtomOverlay } from './YoutubeAtomOverlay';
@@ -51,6 +52,7 @@ export type Props = {
 	imageSize: ImageSizeType;
 	imagePositionOnMobile: ImagePositionType;
 	renderingTarget: RenderingTarget;
+	aspectRatio?: AspectRatio;
 };
 
 export const YoutubeAtom = ({
@@ -79,6 +81,7 @@ export const YoutubeAtom = ({
 	imageSize,
 	imagePositionOnMobile,
 	renderingTarget,
+	aspectRatio,
 }: Props): JSX.Element => {
 	const [overlayClicked, setOverlayClicked] = useState<boolean>(false);
 	const [playerReady, setPlayerReady] = useState<boolean>(false);
@@ -196,7 +199,11 @@ export const YoutubeAtom = ({
 				setIsClosed={setIsClosed}
 				shouldPauseOutOfView={shouldPauseOutOfView}
 			>
-				<MaintainAspectRatio height={height} width={width}>
+				<MaintainAspectRatio
+					height={height}
+					width={width}
+					aspectRatio={aspectRatio}
+				>
 					{
 						/**
 						 * Consent and ad targeting are initially undefined and set by subsequent re-renders
@@ -246,6 +253,7 @@ export const YoutubeAtom = ({
 							showTextOverlay={showTextOverlay}
 							imageSize={imageSize}
 							imagePositionOnMobile={imagePositionOnMobile}
+							aspectRatio={aspectRatio}
 						/>
 					)}
 					{showPlaceholder && (

dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomOverlay.tsx

@@ -15,6 +15,7 @@ import type {
 	ImageSizeType,
 } from '../Card/components/ImageWrapper';
 import { PlayIcon } from '../Card/components/PlayIcon';
+import type { AspectRatio } from '../CardPicture';
 import { FormatBoundary } from '../FormatBoundary';
 import { Kicker } from '../Kicker';
 import { secondsToDuration } from '../MediaDuration';
@@ -38,6 +39,7 @@ type Props = {
 	showTextOverlay?: boolean;
 	imageSize: ImageSizeType;
 	imagePositionOnMobile: ImagePositionType;
+	aspectRatio?: AspectRatio;
 };
 
 const overlayStyles = css`
@@ -149,6 +151,7 @@ export const YoutubeAtomOverlay = ({
 	showTextOverlay,
 	imageSize,
 	imagePositionOnMobile,
+	aspectRatio,
 }: Props) => {
 	const id = `youtube-overlay-${uniqueId}`;
 	const hasDuration = !isUndefined(duration) && duration > 0;
@@ -173,6 +176,7 @@ export const YoutubeAtomOverlay = ({
 						alt={alt}
 						height={height}
 						width={width}
+						aspectRatio={aspectRatio}
 					/>
 				)}
 				{showPill && (

dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPicture.tsx

@@ -8,16 +8,27 @@ type Props = {
 	alt: string;
 	height: number;
 	width: number;
+	aspectRatio?: string;
 };
 
-export const YoutubeAtomPicture = ({ image, alt, height, width }: Props) => {
-	const sources = generateSources(getSourceImageUrl(image), [
-		{ breakpoint: breakpoints.mobile, width: 465 },
-		{ breakpoint: breakpoints.mobileLandscape, width: 645 },
-		{ breakpoint: breakpoints.phablet, width: 620 },
-		{ breakpoint: breakpoints.tablet, width: 700 },
-		{ breakpoint: breakpoints.desktop, width: 620 },
-	]);
+export const YoutubeAtomPicture = ({
+	image,
+	alt,
+	height,
+	width,
+	aspectRatio,
+}: Props) => {
+	const sources = generateSources(
+		getSourceImageUrl(image),
+		[
+			{ breakpoint: breakpoints.mobile, width: 465 },
+			{ breakpoint: breakpoints.mobileLandscape, width: 645 },
+			{ breakpoint: breakpoints.phablet, width: 620 },
+			{ breakpoint: breakpoints.tablet, width: 700 },
+			{ breakpoint: breakpoints.desktop, width: 620 },
+		],
+		aspectRatio,
+	);
 	const fallbackSource = getFallbackSource(sources);
 
 	return (

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

@@ -8,6 +8,7 @@ import type {
 	ImagePositionType,
 	ImageSizeType,
 } from './Card/components/ImageWrapper';
+import type { AspectRatio } from './CardPicture';
 import { useConfig } from './ConfigContext';
 import { ophanTrackerApps, ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
 import { YoutubeAtom } from './YoutubeAtom/YoutubeAtom';
@@ -40,6 +41,7 @@ type Props = {
 	imageSize?: ImageSizeType;
 	imagePositionOnMobile?: ImagePositionType;
 	enableAds: boolean;
+	aspectRatio?: AspectRatio;
 };
 
 /**
@@ -81,6 +83,7 @@ export const YoutubeBlockComponent = ({
 	imageSize = 'large',
 	imagePositionOnMobile = 'none',
 	enableAds,
+	aspectRatio,
 }: Props) => {
 	const [consentState, setConsentState] = useState<ConsentState | undefined>(
 		undefined,
@@ -173,6 +176,7 @@ export const YoutubeBlockComponent = ({
 				imageSize={imageSize}
 				imagePositionOnMobile={imagePositionOnMobile}
 				renderingTarget={renderingTarget}
+				aspectRatio={aspectRatio}
 			/>
 			{!hideCaption && (
 				<Caption