fix(templates): website template video component not referring to correct resource url

[itsdapi]

What?

After normally upload video to payload using website template, the video is referring to a werid url, which return 404.

https://example.com/media/main_page.mp4

Why?

At the VideoMedia component I found this. The media was hard coded into the component

  if (resource && typeof resource === "object") {
    const { filename } = resource;

    return (
      <video autoPlay className={cn(videoClassName)} controls={false} loop muted onClick={onClick} playsInline ref={videoRef}>
        <source src={`${getClientSideURL()}/media/${filename}`} />
      </video>
    );
  }

How?

After checking the props that pass to the Media component I found this url

media {
  id: 16,
  alt: null,
  caption: null,
  prefix: 'media',
  updatedAt: '2025-03-21T12:11:36.378Z',
  createdAt: '2025-03-21T12:11:19.138Z',
  url: '/api/media/file/main_page.mp4',
  thumbnailURL: null,
  filename: 'main_page.mp4',
  mimeType: 'video/mp4',
  filesize: 23786831,
  ...
}

And accessing it do get the video.

http://example.com/api/media/file/main_page.mp4

Changing the above code to this will refer to correct address.

  if (resource && typeof resource === "object") {
    const { url } = resource;

    return (
      <video autoPlay className={cn(videoClassName)} controls={false} loop muted onClick={onClick} playsInline ref={videoRef}>
        <source src={`${getClientSideURL()}${url}`} />
      </video>
    );
  }