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/VideoPlayer.stories.tsx

@@ -5,7 +5,7 @@ import { VideoPlayer } from '.'
 import { config as videoPlayerConfig } from './variants'
 
 const meta: Meta<typeof VideoPlayer> = {
-  title: 'Core Components/🚧 Video 🚧/VideoPlayer',
+  title: 'Core Components/Video/VideoPlayer',
   component: VideoPlayer,
 
   parameters: {
@@ -23,11 +23,12 @@ const meta: Meta<typeof VideoPlayer> = {
         disable: true,
       },
     },
-    src: {
+    sources: {
       table: {
-        type: { summary: 'string' },
+        type: { summary: '{src: string; type: string}[]' },
       },
-      description: 'The source URL of the video.',
+      description:
+        'The different sources of the video, including their formats.',
     },
     captions: {
       table: {
@@ -77,7 +78,16 @@ export default meta
 type Story = StoryObj<typeof VideoPlayer>
 
 const defaultArgs = {
-  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',
+    },
+  ],
   captions: [
     {
       src: './video/captions_en.vtt',