diff --git a/package-lock.json b/package-lock.json
index ba7c5ebc..0baac435 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "react-material-ui-carousel": "^3.4.2",
         "react-mui-dropzone": "^4.0.7",
         "react-paginate": "^8.1.4",
+        "react-player": "^2.16.0",
         "react-redux": "^8.0.2",
         "react-resizable-panels": "^2.0.19",
         "react-router-dom": "^6.4.0",
@@ -12481,6 +12482,11 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -12678,6 +12684,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -15245,6 +15256,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "node_modules/react-floater": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/react-floater/-/react-floater-0.7.6.tgz",
@@ -15360,6 +15376,21 @@
         "react": "^16 || ^17 || ^18"
       }
     },
+    "node_modules/react-player": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.16.0.tgz",
+      "integrity": "sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==",
+      "dependencies": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0"
+      }
+    },
     "node_modules/react-proptype-conditional-require": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz",
@@ -27918,6 +27949,11 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
+    },
     "loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -28084,6 +28120,11 @@
         "fs-monkey": "^1.0.3"
       }
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -29757,6 +29798,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "react-floater": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/react-floater/-/react-floater-0.7.6.tgz",
@@ -29842,6 +29888,18 @@
         "prop-types": "^15"
       }
     },
+    "react-player": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.16.0.tgz",
+      "integrity": "sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==",
+      "requires": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      }
+    },
     "react-proptype-conditional-require": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz",
diff --git a/package.json b/package.json
index ba6bbcaf..5c55a015 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "react-material-ui-carousel": "^3.4.2",
     "react-mui-dropzone": "^4.0.7",
     "react-paginate": "^8.1.4",
+    "react-player": "^2.16.0",
     "react-redux": "^8.0.2",
     "react-resizable-panels": "^2.0.19",
     "react-router-dom": "^6.4.0",
diff --git a/src/containers/Organization/Video/ParaphraseRightPanel.jsx b/src/containers/Organization/Video/ParaphraseRightPanel.jsx
index a7518299..c2db06cc 100644
--- a/src/containers/Organization/Video/ParaphraseRightPanel.jsx
+++ b/src/containers/Organization/Video/ParaphraseRightPanel.jsx
@@ -737,9 +737,16 @@ const ParaphraseRightPanel = ({ currentIndex, currentSubs,setCurrentIndex, showT
                   style={{alignItems:"center", padding: 0, width:"100%"}}
                   onClick={() => {
                     if (player) {
-                      player.pause();
-                      if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
-                        player.currentTime = item.startTime + 0.001;
+                      if( typeof player.pauseVideo === 'function' ){
+                        player.pauseVideo();
+                        if (player.getDuration() >= item.startTime && (player.getCurrentTime() < item.startTime || player.getCurrentTime() > item.endTime)) {
+                          player.seekTo(item.startTime + 0.001);
+                        }
+                      }else{
+                        player.pause();
+                        if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
+                          player.currentTime = item.startTime + 0.001;
+                        }
                       }
                     }
                   }}
diff --git a/src/containers/Organization/Video/RightPanel.jsx b/src/containers/Organization/Video/RightPanel.jsx
index 84ab84cc..d7529a8c 100644
--- a/src/containers/Organization/Video/RightPanel.jsx
+++ b/src/containers/Organization/Video/RightPanel.jsx
@@ -710,9 +710,16 @@ const RightPanel = ({ currentIndex, currentSubs,setCurrentIndex, showTimeline, s
                   aria-describedby={"suggestionList"}
                   onClick={() => {
                     if (player) {
-                      player.pause();
-                      if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
-                        player.currentTime = item.startTime + 0.001;
+                      if( typeof player.pauseVideo === 'function' ){
+                        player.pauseVideo();
+                        if (player.getDuration() >= item.startTime && (player.getCurrentTime() < item.startTime || player.getCurrentTime() > item.endTime)) {
+                          player.seekTo(item.startTime + 0.001);
+                        }
+                      }else{
+                        player.pause();
+                        if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
+                          player.currentTime = item.startTime + 0.001;
+                        }
                       }
                     }
                   }}
diff --git a/src/containers/Organization/Video/TranslationRightPanel.jsx b/src/containers/Organization/Video/TranslationRightPanel.jsx
index 8d480c4d..641a029d 100644
--- a/src/containers/Organization/Video/TranslationRightPanel.jsx
+++ b/src/containers/Organization/Video/TranslationRightPanel.jsx
@@ -734,9 +734,16 @@ const TranslationRightPanel = ({ currentIndex, currentSubs,setCurrentIndex, show
                   style={{alignItems:"center", padding: 0, width:"100%"}}
                   onClick={() => {
                     if (player) {
-                      player.pause();
-                      if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
-                        player.currentTime = item.startTime + 0.001;
+                      if( typeof player.pauseVideo === 'function' ){
+                        player.pauseVideo();
+                        if (player.getDuration() >= item.startTime && (player.getCurrentTime() < item.startTime || player.getCurrentTime() > item.endTime)) {
+                          player.seekTo(item.startTime + 0.001);
+                        }
+                      }else{
+                        player.pause();
+                        if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
+                          player.currentTime = item.startTime + 0.001;
+                        }
                       }
                     }
                   }}
diff --git a/src/containers/Organization/Video/VideoLanding.jsx b/src/containers/Organization/Video/VideoLanding.jsx
index 4e7c57de..d5b4ed0b 100644
--- a/src/containers/Organization/Video/VideoLanding.jsx
+++ b/src/containers/Organization/Video/VideoLanding.jsx
@@ -241,16 +241,16 @@ const VideoLanding = () => {
   };
 
   const renderLoader = () => {
-    if (videoDetails.length <= 0) {
-      return (
-        <Backdrop className={classes.backDrop} open={true}>
-          <CircularProgress color="inherit" size="50px" />
-          <Typography sx={{ mt: 3 }}>
-            Please wait while your request is being processed
-          </Typography>
-        </Backdrop>
-      );
-    }
+    // if (videoDetails.length <= 0) {
+    //   return (
+    //     <Backdrop className={classes.backDrop} open={true}>
+    //       <CircularProgress color="inherit" size="50px" />
+    //       <Typography sx={{ mt: 3 }}>
+    //         Please wait while your request is being processed
+    //       </Typography>
+    //     </Backdrop>
+    //   );
+    // }
   };
 
   useEffect(() => {
@@ -291,6 +291,8 @@ const VideoLanding = () => {
             <VideoPanel
               setCurrentTime={setCurrentTime}
               setPlaying={setPlaying}
+              currentTime={currentTime}
+              playing={playing}
             />
 
             {currentSubs && showSubtitles && (
@@ -382,8 +384,8 @@ const VideoLanding = () => {
           )}
           {fullscreen && 
           <div style={{display:"flex", justifyContent:"center", alignItems:"center", marginTop:"2%"}}>
-          <PlayArrow color="primary" style={{transform:"scale(3)", margin:"0 20px"}} onClick={() => {player.play()}}/>
-          <Pause color="primary" style={{transform:"scale(3)", margin:"0 20px"}} onClick={() => {player.pause()}}/>
+          <PlayArrow color="primary" style={{transform:"scale(3)", margin:"0 20px"}} onClick={() => {if(player) typeof player.pauseVideo === 'function' ? player.playVideo() : player.play()}}/>
+          <Pause color="primary" style={{transform:"scale(3)", margin:"0 20px"}} onClick={() => {if(player) typeof player.pauseVideo === 'function' ? player.pauseVideo() : player.pause()}}/>
           </div>}
           <Box>
             <Button
diff --git a/src/containers/Organization/Video/VoiceOverRightPanel.jsx b/src/containers/Organization/Video/VoiceOverRightPanel.jsx
index 6648d015..0a1dfe72 100644
--- a/src/containers/Organization/Video/VoiceOverRightPanel.jsx
+++ b/src/containers/Organization/Video/VoiceOverRightPanel.jsx
@@ -604,9 +604,16 @@ const VoiceOverRightPanel = ({ setCurrentIndex }) => {
                   }}
                   onClick={() => {
                     if (player) {
-                      player.pause();
-                      if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
-                        player.currentTime = item.startTime + 0.001;
+                      if( typeof player.pauseVideo === 'function' ){
+                        player.pauseVideo();
+                        if (player.getDuration() >= item.startTime && (player.getCurrentTime() < item.startTime || player.getCurrentTime() > item.endTime)) {
+                          player.seekTo(item.startTime + 0.001);
+                        }
+                      }else{
+                        player.pause();
+                        if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
+                          player.currentTime = item.startTime + 0.001;
+                        }
                       }
                     }
                   }}
diff --git a/src/containers/Organization/Video/VoiceOverRightPanel1.jsx b/src/containers/Organization/Video/VoiceOverRightPanel1.jsx
index 0a29295e..14638987 100644
--- a/src/containers/Organization/Video/VoiceOverRightPanel1.jsx
+++ b/src/containers/Organization/Video/VoiceOverRightPanel1.jsx
@@ -806,9 +806,16 @@ const VoiceOverRightPanel1 = ({ currentIndex, setCurrentIndex, showTimeline, seg
                   style={{ alignItems: "center", padding: 0, width: "100%" }}
                   onClick={() => {
                     if (player) {
-                      player.pause();
-                      if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
-                        player.currentTime = item.startTime + 0.001;
+                      if( typeof player.pauseVideo === 'function' ){
+                        player.pauseVideo();
+                        if (player.getDuration() >= item.startTime && (player.getCurrentTime() < item.startTime || player.getCurrentTime() > item.endTime)) {
+                          player.seekTo(item.startTime + 0.001);
+                        }
+                      }else{
+                        player.pause();
+                        if (player.duration >= item.startTime && (player.currentTime < item.startTime || player.currentTime > item.endTime)) {
+                          player.currentTime = item.startTime + 0.001;
+                        }
                       }
                     }
                   }}
diff --git a/src/containers/Organization/Video/components/Metronome.jsx b/src/containers/Organization/Video/components/Metronome.jsx
index 8e1cb2c4..3500458f 100644
--- a/src/containers/Organization/Video/components/Metronome.jsx
+++ b/src/containers/Organization/Video/components/Metronome.jsx
@@ -65,7 +65,7 @@ export default React.memo(
       (event) => {
         if (taskDetails.task_type.includes("VOICEOVER")){return}
         if (isDroging) {
-          if (playing) player.pause();
+          if (playing) typeof player.pauseVideo === 'function' ? player.pauseVideo() : player.pause();
           setDrogEndTime(getEventTime(event));
         }
       },
diff --git a/src/containers/Organization/Video/components/VideoName.jsx b/src/containers/Organization/Video/components/VideoName.jsx
index 9d824671..8e8ea048 100644
--- a/src/containers/Organization/Video/components/VideoName.jsx
+++ b/src/containers/Organization/Video/components/VideoName.jsx
@@ -1,4 +1,4 @@
-import React, { memo, useState } from "react";
+import React, { memo, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 
 //Styles
@@ -29,19 +29,20 @@ const VideoName = ({
     (state) => state.commonReducer.fullscreenVideo
   );
   const videoDetails = useSelector((state) => state.getVideoDetails.data);
+  const player = useSelector((state) => state.commonReducer.player);
 
   return (
     <Box
       className={classes.videoNameBox}
       style={fullscreenVideo ? { width: "60%", margin: "auto" } : { border:"solid", borderColor: "#F5F5F5", borderWidth: "1px"}}
     >
-      <Tooltip title={videoDetails?.video?.name} placement="bottom">
+      <Tooltip title={videoDetails?.video?.name ? videoDetails?.video?.name : player?.playerInfo?.videoData?.title && player?.playerInfo?.videoData?.title} placement="bottom">
         <Typography
           variant="h6"
           className={classes.videoName}
           style={fullscreenVideo ? { color: "white" } : {}}
         >
-          {videoDetails?.video?.name}
+          {videoDetails?.video?.name ? videoDetails?.video?.name : player?.playerInfo?.videoData?.title && player?.playerInfo?.videoData?.title}
         </Typography>
       </Tooltip>
 
diff --git a/src/containers/Organization/Video/components/VideoPanel.jsx b/src/containers/Organization/Video/components/VideoPanel.jsx
index a6822235..3ecd144e 100644
--- a/src/containers/Organization/Video/components/VideoPanel.jsx
+++ b/src/containers/Organization/Video/components/VideoPanel.jsx
@@ -7,7 +7,8 @@ import React, {
 } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { isPlaying } from "utils/subtitleUtils";
-
+import ReactPlayerYT from "react-player/youtube";
+import ReactPlayer from "react-player";
 //Styles
 import { VideoLandingStyle } from "styles";
 
@@ -15,31 +16,37 @@ import { VideoLandingStyle } from "styles";
 import { setPlayer } from "redux/actions";
 
 const VideoPanel = memo(
-  ({ setCurrentTime, setPlaying }) => {
+  ({ setCurrentTime, setPlaying, currentTime, playing }) => {
     const classes = VideoLandingStyle();
     const dispatch = useDispatch();
     const $video = createRef();
 
     const [poster, setPoster] = useState("play.png");
 
-    const videoDetails = useSelector((state) => state.getVideoDetails.data);
-    const fullscreenVideo = useSelector(
+  const videoDetails = useSelector((state) => state.getVideoDetails.data);
+  const taskData = useSelector((state) => state.getTaskDetails.data);
+  const fullscreenVideo = useSelector(
       (state) => state.commonReducer.fullscreenVideo
     );
+  const player = useSelector((state) => state.commonReducer.player);
 
     useEffect(() => {
-      dispatch(setPlayer($video.current));
+      // dispatch(setPlayer($video.current.getInternalPlayer()));
       (function loop() {
         window.requestAnimationFrame(() => {
-          if ($video.current) {
-            setPlaying(isPlaying($video.current));
-            setCurrentTime($video.current.currentTime || 0);
+          if (player) {
+            if (typeof player?.getPlayerState === "function"){
+              setPlaying(player?.getPlayerState() === 1 ? true : false);
+            }else{
+              setPlaying(isPlaying(player));
+            }
+            setCurrentTime(typeof player?.getCurrentTime === 'function' ? player?.getCurrentTime() : player.currentTime || 0);
           }
           loop();
         });
       })();
       // eslint-disable-next-line
-    }, [setPlayer, setCurrentTime, setPlaying, $video]);
+    }, [player, currentTime, playing]);
 
     const onClick = useCallback(() => {
       if ($video.current) {
@@ -55,20 +62,17 @@ const VideoPanel = memo(
 
     return (
       <div className={classes.videoPlayerParent} style={{display: "flex", alignItems: "center", justifyContent: "center", height:"100%"}}>
-        { videoDetails !== undefined && (videoDetails?.direct_video_url?.includes("youtube.com") ? 
-        <iframe 
-          className={classes.videoPlayer}
-          style={{
-            height: "30%",
-            marginTop:"auto",
-            marginBottom:"auto",
-          }}
-          src={videoDetails.direct_video_url}>
-        </iframe>
+        { videoDetails.length === 0 && taskData?.video_url?.includes("youtube") ?
+        <ReactPlayerYT
+          onReady={() => {dispatch(setPlayer($video.current.getInternalPlayer()))}}
+          ref={$video}
+          url={taskData.video_url.replace("https://www.youtube.com/watch?v=", "https://www.youtube.com/embed/")}
+          controls={true}
+        />
         :
-        <video
+        <ReactPlayer
           // onClick={onClick}
-          src={
+          url={
             videoDetails?.video?.audio_only
               ? videoDetails?.direct_audio_url
               : videoDetails?.direct_video_url
@@ -85,8 +89,9 @@ const VideoPanel = memo(
           className={classes.videoPlayer}
           controls={true}
           controlsList="nodownload"
+          onReady={() => {dispatch(setPlayer($video.current.getInternalPlayer()))}}
         />
-      )}
+      }
       </div>
     );
   },