diff --git a/front/components/Pages/Activities/Video/Video.tsx b/front/components/Pages/Activities/Video/Video.tsx
index 00fe9799..f232e3d5 100644
--- a/front/components/Pages/Activities/Video/Video.tsx
+++ b/front/components/Pages/Activities/Video/Video.tsx
@@ -1,8 +1,12 @@
 import { getBackendUrl } from "@services/config/config";
 import React from "react";
 import styled from "styled-components";
+import YouTube from 'react-youtube';
 
 function VideoActivity({ activity, course }: { activity: any; course: any }) {
+  const [videoId, setVideoId] = React.useState('');
+  const [videoType, setVideoType] = React.useState('');
+
   function getChapterName() {
     let chapterName = "";
     let chapterId = activity.chapter_id;
@@ -14,19 +18,68 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
     return chapterName;
   }
 
+  function getYouTubeEmbed(url: any) {
+    // Extract video ID from the YouTube URL
+    var videoId = url.match(/(?:\?v=|\/embed\/|\/\d\/|\/vi\/|\/v\/|https?:\/\/(?:www\.)?youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([^#\&\?\/]+)/)[1];
+
+    // Create the embed object
+    var embedObject = {
+      videoId: videoId,
+      width: 560,
+      height: 315
+    };
+
+    return embedObject;
+  }
+
+
+  React.useEffect(() => {
+    console.log(activity);
+    if (activity.content.video) {
+      setVideoType('video');
+    }
+    if (activity.content.external_video) {
+      setVideoType('external_video');
+      setVideoId(getYouTubeEmbed(activity.content.external_video.uri).videoId);
+    }
+  }, [activity]);
+
   return (
     <VideoActivityLayout>
       <VideoTitle>
-        <p>Chapter : {getChapterName()}</p>
-        {activity.name}
+        <p>{getChapterName()}</p>
+        <p>{activity.name}</p>
       </VideoTitle>
-      <VideoPlayerWrapper>
-        <video controls src={`${getBackendUrl()}content/uploads/video/${activity.content.video.activity_id}/${activity.content.video.filename}`}></video>
-      </VideoPlayerWrapper>
+      {videoType === 'video' && (
+        <VideoPlayerWrapper>
+          <video controls src={`${getBackendUrl()}content/uploads/video/${activity.content.video.activity_id}/${activity.content.video.filename}`}></video>
+        </VideoPlayerWrapper>
+      )}
+      {videoType === 'external_video' && (
+        <VideoPlayerWrapper>
+          <YouTube 
+          className="rounded-md overflow-hidden"
+            opts={
+              {
+                width: '1300',
+                height: '500',
+                playerVars: {
+                  autoplay: 0,
+                },
+
+              }
+            }
+            videoId={videoId} />
+        </VideoPlayerWrapper>
+      )}
+
     </VideoActivityLayout>
   );
 }
 
+
+
+
 export default VideoActivity;
 
 const VideoActivityLayout = styled.div`
diff --git a/front/package-lock.json b/front/package-lock.json
index 3f469463..385b7fb6 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -34,6 +34,7 @@
         "react-hot-toast": "^2.4.1",
         "react-katex": "^3.0.1",
         "react-spinners": "^0.13.8",
+        "react-youtube": "^10.1.0",
         "styled-components": "^6.0.0-beta.9",
         "swr": "^2.0.1",
         "uuid": "^9.0.0",
@@ -5176,8 +5177,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
       "version": "3.2.12",
@@ -6206,6 +6206,11 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "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/localforage": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
@@ -7283,6 +7288,22 @@
         }
       }
     },
+    "node_modules/react-youtube": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-youtube/-/react-youtube-10.1.0.tgz",
+      "integrity": "sha512-ZfGtcVpk0SSZtWCSTYOQKhfx5/1cfyEW1JN/mugGNfAxT3rmVJeMbGpA9+e78yG21ls5nc/5uZJETE3cm3knBg==",
+      "dependencies": {
+        "fast-deep-equal": "3.1.3",
+        "prop-types": "15.8.1",
+        "youtube-player": "5.5.2"
+      },
+      "engines": {
+        "node": ">= 14.x"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.1"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -7648,6 +7669,11 @@
         "readable-stream": "^3.6.0"
       }
     },
+    "node_modules/sister": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/sister/-/sister-3.0.2.tgz",
+      "integrity": "sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA=="
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -8581,6 +8607,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/youtube-player": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/youtube-player/-/youtube-player-5.5.2.tgz",
+      "integrity": "sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==",
+      "dependencies": {
+        "debug": "^2.6.6",
+        "load-script": "^1.0.0",
+        "sister": "^3.0.0"
+      }
+    },
+    "node_modules/youtube-player/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/youtube-player/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
     "node_modules/zeed-dom": {
       "version": "0.9.26",
       "resolved": "https://registry.npmjs.org/zeed-dom/-/zeed-dom-0.9.26.tgz",
@@ -12164,8 +12213,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
       "version": "3.2.12",
@@ -12914,6 +12962,11 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
+    },
     "localforage": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
@@ -13659,6 +13712,16 @@
         "tslib": "^2.0.0"
       }
     },
+    "react-youtube": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-youtube/-/react-youtube-10.1.0.tgz",
+      "integrity": "sha512-ZfGtcVpk0SSZtWCSTYOQKhfx5/1cfyEW1JN/mugGNfAxT3rmVJeMbGpA9+e78yG21ls5nc/5uZJETE3cm3knBg==",
+      "requires": {
+        "fast-deep-equal": "3.1.3",
+        "prop-types": "15.8.1",
+        "youtube-player": "5.5.2"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -13910,6 +13973,11 @@
         "readable-stream": "^3.6.0"
       }
     },
+    "sister": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/sister/-/sister-3.0.2.tgz",
+      "integrity": "sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA=="
+    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -14531,6 +14599,31 @@
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
     },
+    "youtube-player": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/youtube-player/-/youtube-player-5.5.2.tgz",
+      "integrity": "sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==",
+      "requires": {
+        "debug": "^2.6.6",
+        "load-script": "^1.0.0",
+        "sister": "^3.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        }
+      }
+    },
     "zeed-dom": {
       "version": "0.9.26",
       "resolved": "https://registry.npmjs.org/zeed-dom/-/zeed-dom-0.9.26.tgz",
diff --git a/front/package.json b/front/package.json
index 163b2a49..39ef89b3 100644
--- a/front/package.json
+++ b/front/package.json
@@ -35,6 +35,7 @@
     "react-hot-toast": "^2.4.1",
     "react-katex": "^3.0.1",
     "react-spinners": "^0.13.8",
+    "react-youtube": "^10.1.0",
     "styled-components": "^6.0.0-beta.9",
     "swr": "^2.0.1",
     "uuid": "^9.0.0",