Ignore video element in Chromatic

Author: domlander

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

@@ -44,6 +44,7 @@ export const Without5to4Ratio: Story = {
 
 export const PausePlay: Story = {
 	...Default,
+	name: 'Pause and play interaction',
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 		const videoEl = canvas.getByTestId('loop-video');
@@ -64,6 +65,7 @@ export const PausePlay: Story = {
 
 export const UnmuteMute: Story = {
 	...Default,
+	name: 'Unmute and mute interaction',
 	parameters: {
 		test: {
 			// The following error is received without this flag: "TypeError: ophan.trackClickComponentEvent is not a function"
@@ -90,6 +92,7 @@ function sleep(ms: number) {
 
 export const InteractionObserver: Story = {
 	...Default,
+	name: 'Interaction observer',
 	render: (args) => (
 		<div data-testid="test-container">
 			<LoopVideo {...args} />

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -144,6 +144,7 @@ export const LoopVideoPlayer = forwardRef(
 					data-link-name={`gu-video-loop-${
 						showPlayIcon ? 'play' : 'pause'
 					}-${atomId}`}
+					data-chromatic="ignore"
 					preload={preloadPartialData ? 'metadata' : 'none'}
 					loop={true}
 					muted={isMuted}