Use react-youtube

apps/website/package.json

@@ -34,7 +34,8 @@
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-ace": "^10.1.0",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-youtube": "^10.1.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^2.2.0",

apps/website/src/pages/playground.md

@@ -6,6 +6,7 @@ import CreateNewFolderIcon from "@mui/icons-material/CreateNewFolder";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import UploadFileIcon from "@mui/icons-material/UploadFile";
 import UploadIcon from "@mui/icons-material/Upload";
+import YouTube from "react-youtube";
 
 # Playground
 
@@ -36,7 +37,8 @@ development!
 ffmpeg.wasm fundamentals.
 
 Demo Video:
-<iframe style={{"aspect-ratio": "16 / 9", width: "100%"}} src="https://youtube.com/embed/F01B0fV20QA" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
+
+<YouTube videoId="F01B0fV20QA" />
 
 [YouTube Video Link](https://www.youtube.com/watch?v=F01B0fV20QA)
 

package-lock.json

@@ -26,6 +26,9 @@
         "tar": "^6.1.15"
       }
     },
+    "apps/next-app": {
+      "version": "0.1.0"
+    },
     "apps/react-vite-app": {
       "version": "0.0.0",
       "dependencies": {
@@ -347,7 +350,8 @@
         "prism-react-renderer": "^1.3.5",
         "react": "^17.0.2",
         "react-ace": "^10.1.0",
-        "react-dom": "^17.0.2"
+        "react-dom": "^17.0.2",
+        "react-youtube": "^10.1.0"
       },
       "devDependencies": {
         "@docusaurus/module-type-aliases": "^2.2.0",
@@ -11484,6 +11488,11 @@
         "node": ">=4"
       }
     },
+    "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",
       "license": "MIT",
@@ -12289,6 +12298,10 @@
       "version": "2.6.2",
       "license": "MIT"
     },
+    "node_modules/next-app": {
+      "resolved": "apps/next-app",
+      "link": true
+    },
     "node_modules/nice-try": {
       "version": "1.0.5",
       "dev": true,
@@ -14263,6 +14276,22 @@
       "resolved": "apps/react-vite-app",
       "link": true
     },
+    "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-pkg": {
       "version": "3.0.0",
       "dev": true,
@@ -15312,6 +15341,11 @@
         "node": ">= 10"
       }
     },
+    "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/sisteransi": {
       "version": "1.0.5",
       "license": "MIT"
@@ -17947,6 +17981,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/zwitch": {
       "version": "1.0.5",
       "license": "MIT",