diff --git a/src/components/news/NewsArticleImg.tsx b/src/components/news/NewsArticleImg.tsx
index 8fadd8e..fb4da35 100644
--- a/src/components/news/NewsArticleImg.tsx
+++ b/src/components/news/NewsArticleImg.tsx
@@ -1,7 +1,8 @@
 // Modules
-import placeholder from "../../assets/images/placeholder.webp";
-import { LazyLoadImage } from "react-lazy-load-image-component";
-import ReactPlayer from "react-player";
+import { useState, useEffect } from 'react';
+import placeholder from '../../assets/images/placeholder.webp';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import ReactPlayer from 'react-player';
 
 interface IProps {
   img: string;
@@ -9,10 +10,18 @@ interface IProps {
 }
 
 const NewsArticleImg = ({ img, video }: IProps) => {
+  console.log(video);
+  const [videoParse, setVideoParse] = useState<string>('');
+
+  useEffect(() => {
+    const videoModify = video?.replace(' ', '%20');
+    setVideoParse(videoModify as string);
+  }, []);
+
   return (
-    <div className={"news-article-image"}>
+    <div className={'news-article-image'}>
       {video && video.length > 53 ? (
-        <ReactPlayer url={video} controls width="100%" height="100%" />
+        <ReactPlayer url={videoParse} controls width="100%" height="100%" />
       ) : (
         <LazyLoadImage
           src={img}