the video doesn't work is i give youtube link as source

[amirahad]

i tried to give youtube video link as video source but the story keeps loading and doesn't show or play the video. But it works fine if i upload the video on cloud storage like AWS.
here is the code :

<Stories
   stories={Array.isArray(mainStory?.docs[0]?.stories) && mainStory?.docs[0]?.stories.map((story) => {
       return story.type === 'image'
         ? {
                 url: story.image_url,
                 type: 'image',
                 header: {
                     heading: story.topic.title.fr || story.topic.title.en,
                     profileImage: story.topic.image,
                 },
             }
             : {
                    url: story.video_url,
                    type: 'video',
                    header: {
                         heading: story.topic.title.fr || story.topic.title.en,
                         profileImage: story.topic.image,
                    },
                 };
           })}
                 onAllStoriesEnd={
                     () => {
                          if (currentStoryIndex < originalTopics.length - 1) {
                          setFade('fade-out');
                          setLoading(true);
                          setTimeout(() => {
                                setCurrentStoryIndex((prevIndex) => prevIndex + 1);
                                setFade('fade-in');
                                const nextTopicId = originalTopics[currentStoryIndex + 1]?._id;
                                if (nextTopicId) {
                                      getMainStory({ topic: nextTopicId });
                                      setLoading(false);
                                }
                           }, 500);
                           } else if (currentStoryIndex === originalTopics.length - 1) {
                                 router.push('/')
                           }
                        }
                    }
                    height={'100vh'}
                    width={window.innerWidth > 432 ? 432 : window.innerWidth}
                    defaultInterval={20000}
/>

Result:

Live site link:
futurx