fix: replace iframe by react-player

apps/website/components/home-section-video/home-section-video.tsx

@@ -1,7 +1,12 @@
-import styles from './home-section-video.module.scss';
+import dynamic from "next/dynamic";
+
+import {environment} from "../../environments/environment";
+
+const ReactPlayer = dynamic(() => import("react-player"), { ssr: false });
 
 /* eslint-disable-next-line */
-export interface HomeSectionVideoProps {}
+export interface HomeSectionVideoProps {
+}
 
 export function HomeSectionVideo(props: HomeSectionVideoProps) {
   return (
@@ -12,12 +17,12 @@ export function HomeSectionVideo(props: HomeSectionVideoProps) {
         </h2>
         <p className="text-lg text-gray-500 mb-10 text-center px-4 md:px-0">Rien ne vaut une démonstration pour convaincre !</p>
 
-        <iframe src="https://embed.api.video/vod/vi2JpEFEClejM7A4hhn6i7fU"
+        <div className="player-wrapper max-w-[640px] mx-auto">
-                width="90%"
+          <ReactPlayer width="100%"
-                frameBorder="0"
+                       height="100%"
-                scrolling="no"
+                       controls={true}
-                className="mx-auto"
+                       url={environment.strapiUrl + "/uploads/record_player_011_c87b14fd49.mp4"} />
-                allowFullScreen={true}></iframe>
+        </div>
 
       </section>
     </>

package-lock.json

@@ -9708,6 +9708,11 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "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",
@@ -9907,6 +9912,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",
@@ -11364,6 +11374,25 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "react-player": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.11.2.tgz",
+      "integrity": "sha512-V5bf3g6lIpOjfKPUw18Og+qfizmlv6PQfJojlFiGpkfn/e21w5U4nSXE8vSIrFkfllgCrLM35nNGR1/jYQ8KIw==",
+      "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"
+      },
+      "dependencies": {
+        "react-fast-compare": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+          "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+        }
+      }
+    },
     "react-redux": {
       "version": "8.0.5",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",

package.json

@@ -32,6 +32,7 @@
     "react-dom": "18.2.0",
     "react-helmet": "6.0.0",
     "react-hook-form": "7.42.1",
+    "react-player": "^2.11.2",
     "react-redux": "^8.0.5",
     "react-share": "^4.4.1",
     "rxjs": "7.8.0",