Fix hover states with loops/cinemagraphs

Author: domlander

dotcom-rendering/src/components/Card/components/CardWrapper.tsx

@@ -58,7 +58,7 @@ const hoverStyles = css`
 	*/
 	:has(
 			ul.sublinks:hover,
-			.video-container.loop:hover,
+			.video-container:not(.cinemagraph):hover,
 			.slideshow-carousel-footer:hover,
 			.branding-logo:hover
 		) {

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

@@ -30,12 +30,12 @@ import type {
 import { SelfHostedVideoPlayer } from './SelfHostedVideoPlayer';
 import { ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
 
-const videoAndBackgroundStyles = css`
+const videoAndBackgroundStyles = (isCinemagraph: boolean) => css`
 	position: relative;
 	display: flex;
 	justify-content: space-around;
-	z-index: ${getZIndex('video-container')};
 	background-color: ${palette('--video-background')};
+	${!isCinemagraph && `z-index: ${getZIndex('video-container')}`};
 `;
 
 const videoContainerStyles = (width: number, height: number) => css`
@@ -49,10 +49,6 @@ const videoContainerStyles = (width: number, height: number) => css`
 	}
 `;
 
-const cinemagraphContainerStyles = css`
-	pointer-events: none;
-`;
-
 /**
  * Dispatches a custom play audio event so that other videos listening
  * for this event will be muted.
@@ -677,13 +673,10 @@ export const SelfHostedVideo = ({
 		: undefined;
 
 	return (
-		<div css={videoAndBackgroundStyles} className="loop-video-container">
+		<div css={videoAndBackgroundStyles(isCinemagraph)}>
 			<figure
 				ref={setNode}
-				css={[
-					videoContainerStyles(width, height),
-					isCinemagraph && cinemagraphContainerStyles,
-				]}
+				css={videoContainerStyles(width, height)}
 				className={`video-container ${videoStyle.toLocaleLowerCase()}`}
 				data-component="gu-video-loop"
 			>