Fix styling

Author: domlander

dotcom-rendering/src/components/FeatureCard.tsx

@@ -49,17 +49,6 @@ import { YoutubeBlockComponent } from './YoutubeBlockComponent.importable';
 
 export type Position = 'inner' | 'outer' | 'none';
 
-// type Media =
-// 	| {
-// 			type: 'picture';
-// 			imageUrl: string;
-// 			imageAltText?: string;
-// 	  }
-// 	| {
-// 			type: 'youtube-video';
-// 			mainMedia: YoutubeVideo;
-// 	  };
-
 const baseCardStyles = css`
 	display: flex;
 	flex-direction: column;
@@ -547,6 +536,9 @@ export const FeatureCard = ({
 											uniqueId={uniqueId}
 											height={media.mainMedia.height}
 											width={media.mainMedia.width}
+											containerAspectRatio={
+												isImmersive ? 5 / 3 : 4 / 5
+											}
 											// Only cinemagraphs are currently supported in feature cards
 											videoStyle="Cinemagraph"
 											posterImage={
@@ -569,6 +561,7 @@ export const FeatureCard = ({
 											}
 											subtitleSize="large"
 											enableHls={false}
+											isFeatureCard={true}
 										/>
 									</Island>
 								)}

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

@@ -34,13 +34,20 @@ const videoContainerStyles = (
 	isCinemagraph: boolean,
 	aspectRatio: number,
 	containerAspectRatio?: number, // The aspect ratio of the container
+	isFeatureCard?: boolean,
 ) => css`
 	position: relative;
 	display: flex;
 	justify-content: space-around;
 	background-color: ${palette('--video-background')};
 	${!isCinemagraph && `z-index: ${getZIndex('video-container')}`};
 
+	${!isFeatureCard &&
+	css`
+		max-height: 100vh;
+		max-height: 100svh;
+	`}
+
 	/**
 	 * If the video and its containing slot have different dimensions, the slot will use the aspect
 	 * ratio of the video on mobile, so that the video can take up the full width of the screen.
@@ -55,20 +62,35 @@ const videoContainerStyles = (
 	}
 `;
 
-const figureStyles = (aspectRatio: number) => css`
+const figureStyles = (
+	aspectRatio: number,
+	containerAspectRatio?: number,
+	isFeatureCard?: boolean,
+) => css`
 	position: relative;
 	aspect-ratio: ${aspectRatio};
 	height: 100%;
-	max-height: 100vh;
-	max-height: 100svh;
 	max-width: 100%;
-	${from.tablet} {
-		/**
-		 * The value "80" is derived from the aspect ratio of the 5:4 slot.
-		 * When other slots are used for self-hosted videos, this will need to be adjusted.
-		 */
-		max-width: ${aspectRatio * 80}%;
-	}
+
+	${!isFeatureCard &&
+	css`
+		max-height: 100vh;
+		max-height: 100svh;
+
+		${from.tablet} {
+			${typeof containerAspectRatio === 'number' &&
+			`max-width: ${aspectRatio * (1 / containerAspectRatio) * 100}%;`}
+		}
+	`}
+
+	${isFeatureCard &&
+	css`
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		overflow: hidden;
+	`}
 `;
 
 /**
@@ -150,6 +172,7 @@ type Props = {
 	subtitleSource?: string;
 	subtitleSize: SubtitleSize;
 	enableHls: boolean;
+	isFeatureCard?: boolean;
 };
 
 export const SelfHostedVideo = ({
@@ -170,6 +193,7 @@ export const SelfHostedVideo = ({
 	subtitleSource,
 	subtitleSize,
 	enableHls,
+	isFeatureCard = false,
 }: Props) => {
 	const adapted = useShouldAdapt();
 	const { renderingTarget } = useConfig();
@@ -699,11 +723,16 @@ export const SelfHostedVideo = ({
 				isCinemagraph,
 				aspectRatio,
 				containerAspectRatio,
+				isFeatureCard,
 			)}
 		>
 			<figure
 				ref={setNode}
-				css={figureStyles(aspectRatio)}
+				css={figureStyles(
+					aspectRatio,
+					containerAspectRatio,
+					isFeatureCard,
+				)}
 				className={`video-container ${videoStyle.toLocaleLowerCase()}`}
 				data-component="gu-video-loop"
 			>
@@ -737,6 +766,7 @@ export const SelfHostedVideo = ({
 					subtitleSize={subtitleSize}
 					activeCue={activeCue}
 					enableHls={enableHls}
+					isFeatureCard={isFeatureCard}
 				/>
 			</figure>
 		</div>

dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx

@@ -23,16 +23,25 @@ import { VideoProgressBar } from './VideoProgressBar';
 
 export type SubtitleSize = 'small' | 'medium' | 'large';
 
-const videoStyles = (aspectRatio: number) => css`
+const videoStyles = (aspectRatio: number, isFeatureCard: boolean) => css`
 	position: relative;
 	display: block;
 	height: auto;
 	width: 100%;
-	max-height: 100vh;
-	max-height: 100svh;
 	cursor: pointer;
 	/* Prevents CLS by letting the browser know the space the video will take up. */
 	aspect-ratio: ${aspectRatio};
+
+	${!isFeatureCard &&
+	css`
+		max-height: 100vh;
+		max-height: 100svh;
+	`}
+
+	${isFeatureCard &&
+	css`
+		object-fit: cover;
+	`}
 `;
 
 const subtitleStyles = (subtitleSize: SubtitleSize | undefined) => css`
@@ -127,6 +136,7 @@ type Props = {
 	/* used in custom subtitle overlays */
 	activeCue?: ActiveCue | null;
 	enableHls: boolean;
+	isFeatureCard: boolean;
 };
 
 /**
@@ -169,6 +179,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 			subtitleSize,
 			activeCue,
 			enableHls,
+			isFeatureCard,
 		}: Props,
 		ref: React.ForwardedRef<HTMLVideoElement>,
 	) => {
@@ -199,7 +210,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 				<video
 					id={videoId}
 					css={[
-						videoStyles(aspectRatio),
+						videoStyles(aspectRatio, isFeatureCard),
 						showSubtitles && subtitleStyles(subtitleSize),
 					]}
 					crossOrigin="anonymous"