diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index 74f82d37fb..dd0e2cdfcd 100644
--- a/dotcom-rendering/src/components/Card/Card.tsx
+++ b/dotcom-rendering/src/components/Card/Card.tsx
@@ -972,23 +972,25 @@ export const Card = ({
 									roundedCorners={isOnwardContent}
 									aspectRatio={aspectRatio}
 								/>
-								{isVideoMainMedia && mainMedia.duration > 0 && (
-									<div
-										css={css`
-											position: absolute;
-											top: ${space[2]}px;
-											right: ${space[2]}px;
-										`}
-									>
-										<Pill
-											content={secondsToDuration(
-												mainMedia.duration,
-											)}
-											icon={<SvgMediaControlsPlay />}
-											iconSize={'small'}
-										/>
-									</div>
-								)}
+								{(isVideoMainMedia ||
+									(isVideoArticle && !isBetaContainer)) &&
+									mainMedia.duration > 0 && (
+										<div
+											css={css`
+												position: absolute;
+												top: ${space[2]}px;
+												right: ${space[2]}px;
+											`}
+										>
+											<Pill
+												content={secondsToDuration(
+													mainMedia.duration,
+												)}
+												icon={<SvgMediaControlsPlay />}
+												iconSize={'small'}
+											/>
+										</div>
+									)}
 							</>
 						)}
 						{media.type === 'crossword' && (
diff --git a/dotcom-rendering/src/components/Pill.tsx b/dotcom-rendering/src/components/Pill.tsx
index 4fb639a4c7..9cc5664819 100644
--- a/dotcom-rendering/src/components/Pill.tsx
+++ b/dotcom-rendering/src/components/Pill.tsx
@@ -48,7 +48,6 @@ const pillPrefixStyles = css`
 	padding-right: 6px;
 	border-right: 1px solid ${palette('--pill-divider')};
 `;
-
 export const Pill = ({
 	content,
 	prefix,
@@ -56,16 +55,16 @@ export const Pill = ({
 	iconSide = 'left',
 	iconSize = 'xsmall',
 }: Props) => {
-	const Icon = () =>
-		icon
-			? cloneElement(icon, {
-					size: iconSize,
-					theme: { fill: 'currentColor' },
-			  })
-			: null;
+	const renderedIcon =
+		icon &&
+		cloneElement(icon, {
+			size: iconSize,
+			theme: { fill: 'currentColor' },
+		});
+
 	return (
 		<div css={pillStyles}>
-			{iconSide === 'left' && <Icon />}
+			{iconSide === 'left' && renderedIcon}
 			{!!prefix && (
 				<span css={[pillContentStyles, pillPrefixStyles]}>
 					{prefix}
@@ -73,7 +72,7 @@ export const Pill = ({
 			)}
 			<span css={pillContentStyles}>
 				{content}
-				{iconSide === 'right' && <Icon />}
+				{iconSide === 'right' && renderedIcon}
 			</span>
 		</div>
 	);