Merge pull request #14973 from guardian/doml/self-hosted-video-dimensions

Use dimensions from video element in self-hosted video

Author: domlander

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

@@ -128,8 +128,8 @@ export const SelfHostedVideo = ({
 	sources,
 	atomId,
 	uniqueId,
-	height,
-	width,
+	height: expectedHeight,
+	width: expectedWidth,
 	videoStyle,
 	posterImage,
 	fallbackImage,
@@ -158,14 +158,19 @@ export const SelfHostedVideo = ({
 		null,
 	);
 	const [hasPageBecomeActive, setHasPageBecomeActive] = useState(false);
-
 	/**
-	 * Keep a track of whether the video has been in view. We only
-	 * want to pause the video if it has been in view.
+	 * Keeps track of whether the video has been in view.
+	 * For example, we only want to try to pause the video if it has been in view.
 	 */
 	const [hasBeenInView, setHasBeenInView] = useState(false);
 	const [hasBeenPlayed, setHasBeenPlayed] = useState(false);
 	const [hasTrackedPlay, setHasTrackedPlay] = useState(false);
+	/**
+	 * The actual video is a better source of truth of its dimensions.
+	 * The width and height from props are useful to prevent CLS.
+	 */
+	const [width, setWidth] = useState(expectedWidth);
+	const [height, setHeight] = useState(expectedHeight);
 
 	const VISIBILITY_THRESHOLD = 0.5;
 
@@ -527,8 +532,14 @@ export const SelfHostedVideo = ({
 	};
 
 	const handleLoadedData = () => {
-		if (vidRef.current) {
-			setHasAudio(doesVideoHaveAudio(vidRef.current));
+		const video = vidRef.current;
+		if (!video) return;
+
+		setHasAudio(doesVideoHaveAudio(video));
+
+		if (video.videoWidth > 0 && video.videoHeight > 0) {
+			setWidth(video.videoWidth);
+			setHeight(video.videoHeight);
 		}
 	};