diff --git a/templates/website/src/components/Media/ImageMedia/index.tsx b/templates/website/src/components/Media/ImageMedia/index.tsx
index c472254da6c..8a1dc106471 100644
--- a/templates/website/src/components/Media/ImageMedia/index.tsx
+++ b/templates/website/src/components/Media/ImageMedia/index.tsx
@@ -9,7 +9,7 @@ import React from 'react'
 import type { Props as MediaProps } from '../types'
 
 import { cssVariables } from '@/cssVariables'
-import { getClientSideURL } from '@/utilities/getURL'
+import { getMediaUrl } from '@/utilities/getMediaUrl'
 
 const { breakpoints } = cssVariables
 
@@ -44,7 +44,7 @@ export const ImageMedia: React.FC<MediaProps> = (props) => {
 
     const cacheTag = resource.updatedAt
 
-    src = `${getClientSideURL()}${url}?${cacheTag}`
+    src = getMediaUrl(url, cacheTag)
   }
 
   const loading = loadingFromProps || (!priority ? 'lazy' : undefined)
diff --git a/templates/website/src/components/Media/VideoMedia/index.tsx b/templates/website/src/components/Media/VideoMedia/index.tsx
index 873eaacda51..ccff66e1778 100644
--- a/templates/website/src/components/Media/VideoMedia/index.tsx
+++ b/templates/website/src/components/Media/VideoMedia/index.tsx
@@ -5,7 +5,7 @@ import React, { useEffect, useRef } from 'react'
 
 import type { Props as MediaProps } from '../types'
 
-import { getClientSideURL } from '@/utilities/getURL'
+import { getMediaUrl } from '@/utilities/getMediaUrl'
 
 export const VideoMedia: React.FC<MediaProps> = (props) => {
   const { onClick, resource, videoClassName } = props
@@ -37,7 +37,7 @@ export const VideoMedia: React.FC<MediaProps> = (props) => {
         playsInline
         ref={videoRef}
       >
-        <source src={`${getClientSideURL()}/media/${filename}`} />
+        <source src={getMediaUrl(`/media/${filename}`)} />
       </video>
     )
   }
diff --git a/templates/website/src/utilities/getMediaUrl.ts b/templates/website/src/utilities/getMediaUrl.ts
new file mode 100644
index 00000000000..7840c770ca5
--- /dev/null
+++ b/templates/website/src/utilities/getMediaUrl.ts
@@ -0,0 +1,20 @@
+import { getClientSideURL } from '@/utilities/getURL'
+
+/**
+ * Processes media resource URL to ensure proper formatting
+ * @param url The original URL from the resource
+ * @param cacheTag Optional cache tag to append to the URL
+ * @returns Properly formatted URL with cache tag if provided
+ */
+export const getMediaUrl = (url: string | null | undefined, cacheTag?: string | null): string => {
+  if (!url) return ''
+
+  // Check if URL already has http/https protocol
+  if (url.startsWith('http://') || url.startsWith('https://')) {
+    return cacheTag ? `${url}?${cacheTag}` : url
+  }
+
+  // Otherwise prepend client-side URL
+  const baseUrl = getClientSideURL()
+  return cacheTag ? `${baseUrl}${url}?${cacheTag}` : `${baseUrl}${url}`
+}
diff --git a/templates/with-vercel-website/src/components/Media/ImageMedia/index.tsx b/templates/with-vercel-website/src/components/Media/ImageMedia/index.tsx
index c472254da6c..9b1d0a06e4c 100644
--- a/templates/with-vercel-website/src/components/Media/ImageMedia/index.tsx
+++ b/templates/with-vercel-website/src/components/Media/ImageMedia/index.tsx
@@ -10,6 +10,7 @@ import type { Props as MediaProps } from '../types'
 
 import { cssVariables } from '@/cssVariables'
 import { getClientSideURL } from '@/utilities/getURL'
+import { getMediaUrl } from '@/utilities/getMediaUrl'
 
 const { breakpoints } = cssVariables
 
@@ -44,7 +45,7 @@ export const ImageMedia: React.FC<MediaProps> = (props) => {
 
     const cacheTag = resource.updatedAt
 
-    src = `${getClientSideURL()}${url}?${cacheTag}`
+    src = getMediaUrl(url, cacheTag)
   }
 
   const loading = loadingFromProps || (!priority ? 'lazy' : undefined)
diff --git a/templates/with-vercel-website/src/components/Media/VideoMedia/index.tsx b/templates/with-vercel-website/src/components/Media/VideoMedia/index.tsx
index 873eaacda51..a2b7b647ecd 100644
--- a/templates/with-vercel-website/src/components/Media/VideoMedia/index.tsx
+++ b/templates/with-vercel-website/src/components/Media/VideoMedia/index.tsx
@@ -4,8 +4,7 @@ import { cn } from '@/utilities/ui'
 import React, { useEffect, useRef } from 'react'
 
 import type { Props as MediaProps } from '../types'
-
-import { getClientSideURL } from '@/utilities/getURL'
+import { getMediaUrl } from '@/utilities/getMediaUrl'
 
 export const VideoMedia: React.FC<MediaProps> = (props) => {
   const { onClick, resource, videoClassName } = props
@@ -37,7 +36,7 @@ export const VideoMedia: React.FC<MediaProps> = (props) => {
         playsInline
         ref={videoRef}
       >
-        <source src={`${getClientSideURL()}/media/${filename}`} />
+        <source src={getMediaUrl(`/media/${filename}`)} />
       </video>
     )
   }
diff --git a/templates/with-vercel-website/src/utilities/getMediaUrl.ts b/templates/with-vercel-website/src/utilities/getMediaUrl.ts
new file mode 100644
index 00000000000..7840c770ca5
--- /dev/null
+++ b/templates/with-vercel-website/src/utilities/getMediaUrl.ts
@@ -0,0 +1,20 @@
+import { getClientSideURL } from '@/utilities/getURL'
+
+/**
+ * Processes media resource URL to ensure proper formatting
+ * @param url The original URL from the resource
+ * @param cacheTag Optional cache tag to append to the URL
+ * @returns Properly formatted URL with cache tag if provided
+ */
+export const getMediaUrl = (url: string | null | undefined, cacheTag?: string | null): string => {
+  if (!url) return ''
+
+  // Check if URL already has http/https protocol
+  if (url.startsWith('http://') || url.startsWith('https://')) {
+    return cacheTag ? `${url}?${cacheTag}` : url
+  }
+
+  // Otherwise prepend client-side URL
+  const baseUrl = getClientSideURL()
+  return cacheTag ? `${baseUrl}${url}?${cacheTag}` : `${baseUrl}${url}`
+}