src/app/[locale]/video/[id]/page.tsx

@@ -6,13 +6,15 @@ import Video from "@/components/Pages/Video";
 
 import { fetchVideoData } from "@/utils/scrape/video";
 
+import { decodeVideoUrlPath } from '@/utils/string';
+
 import { useLocale } from 'next-intl';
 
 export default async function VideoPage({ params }: { params: { id: string } }) {
 
   const locale = useLocale()
 
-  const decodedId = decodeURIComponent(params.id)
+  const decodedId = decodeVideoUrlPath(params.id)
 
   const [data, related] = await fetchVideoData(decodedId)
 

src/components/Layout/Results/Wrapper/Gallery/Thumbnail/index.tsx

@@ -9,6 +9,7 @@ import classNames from 'classnames';
 import Link from 'next/link'
 
 import style from './Thumbnail.module.scss'
+import { encodeVideoUrlPath } from '@/utils/string';
 
 interface Props {
     locale: string
@@ -22,7 +23,7 @@ const Thumbnail: React.FC<Props> = (props) => {
 
     const { locale, videoUrl, imgUrl, text, show } = props
 
-    const encodedUri = encodeURIComponent(videoUrl)
+    const encodedUri = encodeVideoUrlPath(videoUrl)
 
     return (
         <div className={classNames(style.thumbnailContainer, { [style.show]: show } )}>

src/utils/string.ts

@@ -49,3 +49,11 @@ export const removeHttpS = (url: string): string => {
     }
     return url;
 };
+
+export const encodeVideoUrlPath = (input: string): string => {
+    return input.replace(/^\/+/, '').replace(/\/+$/, '').replace(/\//g, "-");
+};
+
+export const decodeVideoUrlPath = (input: string): string => {
+    return `/${input.replace(/^\-+/, '').replace(/\-+$/, '').replace(/\-/g, "/")}`;
+};