diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index 33f838f1ad..de3caba25b 100644
--- 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'
+ : ''
+ }
/>
diff --git a/dotcom-rendering/src/components/MaintainAspectRatio.tsx b/dotcom-rendering/src/components/MaintainAspectRatio.tsx
index 20c7a9d991..4bbb8461d8 100644
--- 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/ */
iframe,
& > video {
width: 100%;
diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.tsx
index 0efb7bb31d..f3cf02ee12 100644
--- 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(false);
const [playerReady, setPlayerReady] = useState(false);
@@ -196,7 +198,11 @@ export const YoutubeAtom = ({
setIsClosed={setIsClosed}
shouldPauseOutOfView={shouldPauseOutOfView}
>
-
+
{
/**
* 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
index b98da2d22d..806ded9370 100644
--- 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
index eb36dd6b22..05751b513e 100644
--- 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(
undefined,
@@ -173,6 +175,7 @@ export const YoutubeBlockComponent = ({
imageSize={imageSize}
imagePositionOnMobile={imagePositionOnMobile}
renderingTarget={renderingTarget}
+ aspectRatio={aspectRatio}
/>
{!hideCaption && (