Mute video when out of view

domlander · domlander · commit 46a19342742a · 2025-06-25T15:11:08.000+01:00
diff --git a/dotcom-rendering/src/components/LoopVideo.importable.tsx b/dotcom-rendering/src/components/LoopVideo.importable.tsx
@@ -95,6 +95,7 @@ export const LoopVideo = ({
 		if (isNoLongerInView) {
 			setPlayerState('PAUSED_BY_INTERSECTION_OBSERVER');
 			void vidRef.current.pause();
+			setIsMuted(true);
 		}
 
 		// If a user action paused the video, they have indicated
@@ -104,6 +105,7 @@ export const LoopVideo = ({
 			playerState === 'PAUSED_BY_INTERSECTION_OBSERVER' && isInView;
 		if (isBackInView) {
 			setPlayerState('PLAYING');
+
 			void vidRef.current.play();
 		}
 	}, [isInView, hasBeenInView, playerState]);

Original file line number	Diff line number	Diff line change
`@@ -95,6 +95,7 @@ export const LoopVideo = ({`
`95`	`95`	`if (isNoLongerInView) {`
`96`	`96`	`setPlayerState('PAUSED_BY_INTERSECTION_OBSERVER');`
`97`	`97`	`void vidRef.current.pause();`
	`98`	`+ setIsMuted(true);`
`98`	`99`	`}`
`99`	`100`
`100`	`101`	`// If a user action paused the video, they have indicated`
`@@ -104,6 +105,7 @@ export const LoopVideo = ({`
`104`	`105`	`playerState === 'PAUSED_BY_INTERSECTION_OBSERVER' && isInView;`
`105`	`106`	`if (isBackInView) {`
`106`	`107`	`setPlayerState('PLAYING');`
	`108`	`+`
`107`	`109`	`void vidRef.current.play();`
`108`	`110`	`}`
`109`	`111`	`}, [isInView, hasBeenInView, playerState]);`