Use width from 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;
 
@@ -524,6 +529,9 @@ export const SelfHostedVideo = ({
 				cue.line = percentFromTop;
 			}
 		}
+
+		setWidth(video.videoWidth);
+		setHeight(video.videoHeight);
 	};
 
 	const handleLoadedData = () => {