change aspect ratio if its a flex container

guardian · Oct 22, 2024 · 2ed431a · 2ed431a
1 parent 0fea327
commit 2ed431a
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 12 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -674,6 +674,11 @@ export const Card = ({
 														: imageSize
 												}
 												enableAds={false}
+												aspectRatio={
+													isFlexibleContainer
+														? '5/4'
+														: ''
+												}
 											/>
 										</Island>
 									</div>

diff --git a/dotcom-rendering/src/components/MaintainAspectRatio.tsx b/dotcom-rendering/src/components/MaintainAspectRatio.tsx
@@ -3,17 +3,24 @@ import { css } from '@emotion/react';
 type Props = {
 	height: number;
 	width: number;
+	aspectRatio?: string;
 	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}%;
-
+			${aspectRatio
+				? `aspect-ratio: ${aspectRatio};`
+				: `padding-bottom: ${(height / width) * 100}% `}
 			& > iframe,
 			& > video {
 				width: 100%;

diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx
@@ -51,6 +51,7 @@ export type Props = {
 	imageSize: ImageSizeType;
 	imagePositionOnMobile: ImagePositionType;
 	renderingTarget: RenderingTarget;
+	aspectRatio?: string;
 };
 
 export const YoutubeAtom = ({
@@ -79,6 +80,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 +198,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

diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPicture.tsx b/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 = '5:4',
+}: 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 (

diff --git a/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx b/dotcom-rendering/src/components/YoutubeBlockComponent.importable.tsx
@@ -40,6 +40,7 @@ type Props = {
 	imageSize?: ImageSizeType;
 	imagePositionOnMobile?: ImagePositionType;
 	enableAds: boolean;
+	aspectRatio?: string;
 };
 
 /**
@@ -81,6 +82,7 @@ export const YoutubeBlockComponent = ({
 	imageSize = 'large',
 	imagePositionOnMobile = 'none',
 	enableAds,
+	aspectRatio,
 }: Props) => {
 	const [consentState, setConsentState] = useState<ConsentState | undefined>(
 		undefined,
@@ -173,6 +175,7 @@ export const YoutubeBlockComponent = ({
 				imageSize={imageSize}
 				imagePositionOnMobile={imagePositionOnMobile}
 				renderingTarget={renderingTarget}
+				aspectRatio={aspectRatio}
 			/>
 			{!hideCaption && (
 				<Caption