diff --git a/html/projet_detail.html b/html/projet_detail.html
index a85de8b..bc1d554 100644
--- a/html/projet_detail.html
+++ b/html/projet_detail.html
@@ -116,6 +116,7 @@
           <div id="metric_viewer_placeholder">
             <canvas id="metric_viewer"></canvas>
           </div>
+          <div id="video-container"><span>Pas de vidéos pour le projet par défaut</span></div>
         </div>
         <div class="col-md-6">
           <div id="content1" class="hiddenTable">
@@ -125,12 +126,10 @@
             >
               <thead>
                 <tr>
-                  <th>
+                  <th colspan="3">
                     <button class="btn btn-primary" id="toggle-view">
                       See all images
                     </button>
-                  </th>
-                  <th>
                     <button class="btn btn-primary">export images</button>
                   </th>
                 </tr>
diff --git a/js/projet_detail.js b/js/projet_detail.js
index 9daf440..96bbbd0 100644
--- a/js/projet_detail.js
+++ b/js/projet_detail.js
@@ -21,7 +21,6 @@ document.addEventListener("DOMContentLoaded", async () => {
   const durationInput = document.getElementById('duration');
   const tableImage = document.getElementById("content1");
   const numberBoard = document.getElementById('number-board');
-
   let selectedNumbers = [];
 
   choiceSelect.addEventListener('change', toggleContainers);
@@ -208,6 +207,8 @@ function populateImageTable(DataMetrics) {
 
 async function generateViewMetric(projectId) {
   const ctx = document.getElementById("metric_viewer").getContext("2d");
+  const videoPlaceHolder = document.getElementById('video-container')
+
   let Hygrometrie = [];
   let Temperature = [];
   let datesMeasurement = [];
@@ -225,15 +226,21 @@ async function generateViewMetric(projectId) {
   });
 
   const videoId = document.getElementById("video_selector").value;
+  
   measurements = await getDataMetrics(projectId);
   let samples;
   if(videoId!=-1){
     currentVideoDatas = await getDataVideoFromApi(videoId);
-    samples = convertStringToArray(currentVideoDatas[0]["measurement_ids"]);
+    const pathToVideo = await getVideoFromApi(videoId)
+    samples = currentVideoDatas[0]["measurement_ids"];
+    videoPlaceHolder.innerHTML=`
+    <video width="600" controls>
+    <source src="path/to/your/video.mp4" type="video/mp4">
+    Your browser does not support the video tag.
+  </video>`
   } else {
     samples=measurements.map(measurements => measurements.id);
   }
-
   tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
   tempoMeasure.forEach((measure) => {
     datesMeasurement.push(measure.timestamp);
diff --git a/js/utilities/populate.js b/js/utilities/populate.js
index fbd8541..c2501b7 100644
--- a/js/utilities/populate.js
+++ b/js/utilities/populate.js
@@ -2,6 +2,7 @@ async function PopulateSelect(mySelect, id) {
   let data = [];
   if (mySelect.name == "videos" && id != null) {
     data = await getDataProjectVideosFromApi(id);
+    console.log(data)
     const selectObjDefault = document.createElement("option");
     selectObjDefault.value = -1;
     selectObjDefault.innerHTML = "Default";
diff --git a/js/utilities/routes.js b/js/utilities/routes.js
index 52456b1..7a77232 100644
--- a/js/utilities/routes.js
+++ b/js/utilities/routes.js
@@ -74,25 +74,42 @@ async function getDataVideoFromApi(id) {
 
 async function postNewVideo(project_id, measurements_id, name_video, resolution, duration) {
   try {
+    const measures = JSON.stringify(measurements_id);
+    const mydata = JSON.stringify({
+      project_id: project_id,
+      measurement_ids: measures, // Ensure this matches the expected field name
+      name: name_video,
+      resolution: resolution,
+      duration: duration
+    });
+    console.log(mydata);
+
     const response = await $.ajax({
       url: api_url.concat(`/videos/`),
       method: "POST",
       dataType: "json",
-      contentType: "application/json", // Specify the content type as JSON
-      data: JSON.stringify({
-        project_id: project_id,
-        measurements_id: measurements_id,
-        name_video: name_video,
-        resolution: resolution,
-        duration: duration
-      })
+      contentType: "application/json",
+      data: mydata
     });
-    // If the request is successful, store the data in the cache and return it
+
     console.log("Video posted successfully:", response);
-    return response;
   } catch (error) {
     console.error("Error posting video:", error);
-    throw error; // Re-throw the error to handle it outside the function if needed
+    throw error;
   }
 }
 
+async function getVideoFromApi(id) {
+  try {
+    const response = await $.ajax({
+      url: api_url.concat(`/videos/${id}`),
+      method: "GET",
+      dataType: "json",
+    });
+    // If the request is successful, store the data in the cache and return it
+    return response;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    throw error; // Re-throw the error to handle it outside the function if needed
+  }
+}
\ No newline at end of file
diff --git a/js/utilities/tools.js b/js/utilities/tools.js
index 11aca3c..1e494db 100644
--- a/js/utilities/tools.js
+++ b/js/utilities/tools.js
@@ -1,9 +1,9 @@
-function convertStringToArray(inputString) {
-  // Split the string by the delimiter '/'
-  const stringArray = inputString.split(",");
+function convertStringToArray(string) {
+  console.log(string)
+  const numberStrings = string.replace(/[{}]/g, '').split(',');
 
-  // Convert each element to a number
-  const numberArray = stringArray.map(Number);
+  // Trim whitespace and convert the string numbers to integers
+  const numberArray = numberStrings.map(num => parseInt(num.trim(), 10));
 
   return numberArray;
 }