Fix/BOOK-240 video fixes

* fix(BOOK-240): Added support for multiple sources and fixed issue with play/pause on mobile

* fix(BOOK-240): Pausing hero video when scrolling out of view


Approved-by: Christel Westerberg

packages/design-system/lib/components/VideoPlayer/VideoWithCard/VideoWithCard.stories.tsx

@@ -4,7 +4,7 @@ import { VideoWithCard } from '.'
 import { config } from './variants'
 
 const meta: Meta<typeof VideoWithCard> = {
-  title: 'Core Components/🚧 Video 🚧/VideoWithCard',
+  title: 'Core Components/Video/VideoWithCard',
   component: VideoWithCard,
   parameters: {
     docs: {
@@ -80,7 +80,7 @@ const meta: Meta<typeof VideoWithCard> = {
       table: {
         type: {
           summary:
-            '{ src: string; captions?: Caption[]; focalPoint?: FocalPoint}',
+            '{ sources: { src: string; type: string }[]; captions?: Caption[]; focalPoint?: FocalPoint}',
         },
       },
       description:
@@ -94,7 +94,16 @@ export default meta
 type Story = StoryObj<typeof VideoWithCard>
 
 const videoProps = {
-  src: 'https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/bltad0fe3c2ce340947/68eced6c14e5a8150ebba18c/Scandic_EB_Master.mp4',
+  sources: [
+    {
+      src: 'https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/bltc3aa53ac9bf6798c/693ad4b65b0889d6348893f3/Test_video.mp4',
+      type: 'video/mp4',
+    },
+    {
+      src: 'https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/blt029be07ddd444eea/693c251c09e17b33c93c1dd6/hero-banner-1920-vp9.webm',
+      type: 'video/webm',
+    },
+  ],
 }
 
 const quoteCardProps = {