I am using nextjs and have a /share/[id]/page.tsx route in my project and when the user enters a video Id after the share/ I want to fetch all the information about the video from the database and add the the video mp4 S3 bucket url to the open graph so that if the link mydomain.com/share/22 is pasted on twitter, discord, gmail etc. it should dynamically embed its own video player and fetch from the url and play the video.

// /share/[id]/page.tsx
export async function generateMetadata({ params }: { params: { id: string } }) {
    
    const recordingUrl = await getShareVideo(params.id);
    return {
        title: `${recordingUrl?.videoTitle} - MyApp`,
        openGraph: {
            title: `${recordingUrl?.videoTitle} - MyApp`,
            description: `${recordingUrl?.videoTitle} - MyApp`,
            url: `https://domain.app/share/${params.id}`,
            siteName: 'https://domain.app',
            
            videos: [
              {
                url: recordingUrl?.videoURL, // This is a S3 bucket mp4 url :- https://s3....com/videoId.mp4
                width: 1920,
                height: 1080,
              },
            ],
         
          },

          twitter: {
            card: `${recordingUrl?.videoTitle} - MyApp`,
            title: `${recordingUrl?.videoTitle} - MyApp`,
            description: 'Video recorded using MyApp',
            
            // images: ['https://nextjs.org/og.png'], // Must be an absolute URL
            videos: [recordingUrl?.videoURL]
          },
          
    }
    
}

When I tried the above code, and try pasting the /share... link to discord, twitter, etc. I am not able to see any video player by them, discord should have populated its own video player that is fetching the video from the og:video:url, but it won’t show it.