WIP

Author: domlander

dotcom-rendering/src/components/FeatureCard.stories.tsx

@@ -393,8 +393,8 @@ export const WithSelfHostedVideo = {
 					mimeType: 'video/mp4',
 				},
 			],
-			width: 576,
 			height: 720,
+			width: 576,
 			duration: 18,
 		},
 	},
@@ -412,8 +412,22 @@ export const WithSelfHostedImmersiveVideo = {
 					mimeType: 'video/mp4',
 				},
 			],
-			width: 1200,
 			height: 720,
+			width: 1200,
+		},
+	},
+} satisfies Story;
+
+export const WithSelfHostedVideoOnShortScreen = {
+	args: {
+		...WithSelfHostedVideo.args,
+	},
+	parameters: {
+		viewport: {
+			shortViewport: {
+				name: 'Short viewport',
+				styles: { height: '1000px', width: '700px' },
+			},
 		},
 	},
 } satisfies Story;

dotcom-rendering/src/components/FeatureCard.tsx

@@ -520,8 +520,12 @@ export const FeatureCard = ({
 											sources={media.mainMedia.sources}
 											atomId={media.mainMedia.atomId}
 											uniqueId={uniqueId}
-											height={media.mainMedia.height}
-											width={media.mainMedia.width}
+											// height={media.mainMedia.height}
+											// width={media.mainMedia.width}
+											height={2 * 720}
+											width={
+												2 * (isImmersive ? 1200 : 576)
+											}
 											// Only cinemagraphs are currently supported in feature cards
 											videoStyle="Cinemagraph"
 											posterImage={

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { log, storage } from '@guardian/libs';
-import { from, space } from '@guardian/source/foundations';
+import { from, space, until } from '@guardian/source/foundations';
 import { SvgAudio, SvgAudioMute } from '@guardian/source/react-components';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import {
@@ -38,14 +38,16 @@ const videoAndBackgroundStyles = (isCinemagraph: boolean) => css`
 	${!isCinemagraph && `z-index: ${getZIndex('video-container')}`};
 `;
 
-const videoContainerStyles = (width: number, height: number) => css`
+const videoContainerStyles = css`
 	position: relative;
 	height: 100%;
+	/** TODO Remove for feature cards */
 	max-height: 100vh;
 	max-height: 100svh;
 	max-width: 100%;
-	${from.tablet} {
-		max-width: ${(width / height) * 80}%;
+
+	${until.tablet} {
+		width: 100%; // Safari
 	}
 `;
 
@@ -672,11 +674,38 @@ export const SelfHostedVideo = ({
 		? getOptimisedPosterImage(posterImage)
 		: undefined;
 
+	const aspectRatioOfCard = (aspectRatioOfImage: string | undefined) => {
+		if (!aspectRatioOfImage) return null;
+
+		const aspectRatio = aspectRatioOfImage.split(':');
+		if (!aspectRatio[0] || !aspectRatio[1]) return null;
+
+		const aspectRatioWidth = parseInt(aspectRatio[0]);
+		const aspectRatioHeight = parseInt(aspectRatio[1]);
+
+		return aspectRatioWidth / aspectRatioHeight;
+	};
+
+	const containerAspectRatio = aspectRatioOfCard(fallbackImageAspectRatio);
+
 	return (
 		<div css={videoAndBackgroundStyles(isCinemagraph)}>
 			<figure
 				ref={setNode}
-				css={videoContainerStyles(width, height)}
+				css={[
+					videoContainerStyles,
+					containerAspectRatio !== null &&
+						css`
+							${from.tablet} {
+								/** If the video is thinner (i.e. taller) than the container, ensure that it
+									takes up enough width such that the height is the same as the container and the
+									aspect ratio is maintained */
+								max-width: ${(width / height) *
+								(1 / containerAspectRatio) *
+								100}%;
+							}
+						`,
+				]}
 				className={`video-container ${videoStyle.toLocaleLowerCase()}`}
 				data-component="gu-video-loop"
 			>

dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx

@@ -26,8 +26,9 @@ export type SubtitleSize = 'small' | 'medium' | 'large';
 const videoStyles = (width: number, height: number) => css`
 	position: relative;
 	display: block;
-	height: auto;
+	height: 100%;
 	width: 100%;
+	/** TODO Remove for feature cards */
 	max-height: 100vh;
 	max-height: 100svh;
 	cursor: pointer;
@@ -194,7 +195,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 						videoStyles(width, height),
 						showSubtitles && subtitleStyles(subtitleSize),
 					]}
-					crossOrigin="anonymous"
+					// crossOrigin="anonymous"
 					ref={ref}
 					tabIndex={0}
 					data-testid="self-hosted-video-player"