Don't autoplay if user prefers reduced motion

Author: domlander

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

@@ -22,6 +22,7 @@ type Props = {
 	height?: number;
 	hasAudio?: boolean;
 	fallbackImage: JSX.Element;
+	posterImage?: string;
 };
 
 export const LoopVideo = ({
@@ -31,6 +32,7 @@ export const LoopVideo = ({
 	height = 360,
 	hasAudio = true,
 	fallbackImage,
+	posterImage,
 }: Props) => {
 	const adapted = useShouldAdapt();
 	const { renderingTarget } = useConfig();
@@ -39,6 +41,7 @@ export const LoopVideo = ({
 	const [isPlaying, setIsPlaying] = useState(false);
 	const [isMuted, setIsMuted] = useState(true);
 	const [currentTime, setCurrentTime] = useState(0);
+	const [prefersReducedMotion, setPrefersReducedMotion] = 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.
@@ -58,6 +61,13 @@ export const LoopVideo = ({
 
 		if (isInView) {
 			if (!hasBeenInView) {
+				if (
+					window.matchMedia('(prefers-reduced-motion: reduce)')
+						.matches
+				) {
+					setPrefersReducedMotion(true);
+					return;
+				}
 				// When the video first comes into view, it should autoplay
 				setIsPlaying(true);
 				void vidRef.current.play();
@@ -166,6 +176,7 @@ export const LoopVideo = ({
 				handleKeyDown={handleKeyDown}
 				onError={onError}
 				AudioIcon={AudioIcon}
+				posterImage={prefersReducedMotion ? posterImage : undefined}
 			/>
 		</div>
 	);

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

@@ -23,9 +23,11 @@ export const Default = {
 		videoId: 'test-video-1',
 		height: 337.5,
 		width: 600,
+		posterImage:
+			'https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg',
 		fallbackImage: (
 			<CardPicture
-				mainImage="https://i.guim.co.uk/img/media/13dd7e5c4ca32a53cd22dfd90ac1845ef5e5d643/91_0_1800_1080/master/1800.jpg?width=465&dpr=1&s=none&crop=5%3A4"
+				mainImage="https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg"
 				imageSize="large"
 				loading="eager"
 			/>

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -55,6 +55,11 @@ type Props = {
 	handleKeyDown: (event: React.KeyboardEvent<HTMLVideoElement>) => void;
 	onError: (event: SyntheticEvent<HTMLVideoElement>) => void;
 	AudioIcon: (iconProps: IconProps) => JSX.Element;
+	/**
+	 * We show a poster image when the user has indicated that
+	 * they do not want videos to play automatically
+	 */
+	posterImage?: string;
 };
 
 /**
@@ -70,6 +75,7 @@ export const LoopVideoPlayer = forwardRef(
 			height,
 			hasAudio,
 			fallbackImage,
+			posterImage,
 			isPlayable,
 			setIsPlayable,
 			isPlaying,
@@ -93,12 +99,13 @@ export const LoopVideoPlayer = forwardRef(
 				<video
 					id={loopVideoId}
 					ref={ref}
-					preload="none"
+					preload={posterImage ? 'metadata' : 'none'}
 					loop={true}
 					muted={isMuted}
 					playsInline={true}
 					height={height}
 					width={width}
+					poster={posterImage ?? undefined}
 					onPlaying={() => {
 						setIsPlaying(true);
 					}}