diff --git a/docs/services/cloudservices/ciroh jupyterhub/documentation/push.md b/docs/services/cloudservices/ciroh jupyterhub/documentation/push.md
index 459d806..f2a29bb 100644
--- a/docs/services/cloudservices/ciroh jupyterhub/documentation/push.md
+++ b/docs/services/cloudservices/ciroh jupyterhub/documentation/push.md
@@ -24,9 +24,13 @@ Follow these steps to allow 2i2c JupyterHub to push to GitHub repositories:
```bash
gh-scoped-creds --client-id Iv23lixIgj0sAZqz98bH
```
-### You can also follow along with this [video tutorial](https://youtu.be/t6WkSpYDiaA) that walks you through the same process visually.
+### You can also follow along with this video tutorial that walks you through the same process visually.
+import VideoPlayer from '/src/components/VideoPlayer.js';
+
+
+
+
-
\ No newline at end of file
diff --git a/docs/services/cloudservices/ciroh jupyterhub/documentation/requestimages.md b/docs/services/cloudservices/ciroh jupyterhub/documentation/requestimages.md
new file mode 100644
index 0000000..88e0a79
--- /dev/null
+++ b/docs/services/cloudservices/ciroh jupyterhub/documentation/requestimages.md
@@ -0,0 +1,39 @@
+---
+sidebar_position: 3
+title: "Instructions for requesting custom images"
+description: "2i2c JupyterHub is a cloud-based JupyterHub environment specifically designed for hydrological researchers. It is powered by 2i2c JupyterHub, a cloud-based JupyterHub environment specifically on Google Cloud"
+tags:
+ - 2i2c
+ - JupyterHub
+ - GCP
+ - notebook
+ - custom images
+ - tutorial
+---
+
+# A Step-by-Step Guide: Requesting custom images
+If you have a request for creating custom images, then please follow these instructions.
+### 1. Create an environment.yml file:
+- Open your terminal or command prompt. Make sure you have conda installed and activated in the environment that contains the packages you want to use for creating custom images. Learn more [here](https://conda.io/projects/conda/en/latest/user-guide/getting-started.html).
+
+- Run the following command, replacing **ENVNAME** with the actual name of your environment.
+
+```bash
+conda env export -n ENVNAME > environment.yml
+```
+
+### 2. Submit a Request Form:
+
+
+- Click on the link below to access the Jupyterhub (2i2c) Software Install form.
+- Select Install Software on CIROH 2i2c JupyterHub as a reason for request.
+- Fill out remaining sections of the form and submit it.
+
+ JupyterHub (2i2c) Software Install Form
+
+### 3. Share your environment.yml file with CIROH-IT support
+
+- After submitting the request form, attach the environment.yml file you created in step 1 to an email and send it to ciroh-it-support@ua.edu
+
+
+
\ No newline at end of file
diff --git a/docs/services/cloudservices/ciroh jupyterhub/index.md b/docs/services/cloudservices/ciroh jupyterhub/index.md
index 2360a7b..736949d 100644
--- a/docs/services/cloudservices/ciroh jupyterhub/index.md
+++ b/docs/services/cloudservices/ciroh jupyterhub/index.md
@@ -43,13 +43,24 @@ If your software in not listed in this file, please submit the form below to req
### CIROH JupyterHub Environments:
Click on below button to access the CIROH JupyterHub environments (production and staging environments):
+
+ CIROH Production JupyterHub
+
+ CIROH Staging JupyterHub
+
+-----
+
:::note
Please remember to stop the server when you're not actively using it
:::
- CIROH Production JupyterHub
- CIROH Staging JupyterHub
+import VideoPlayer from '/src/components/VideoPlayer.js';
+
+
+
+
+
_____
diff --git a/package-lock.json b/package-lock.json
index 391d34d..65e2c86 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-markdown": "^9.0.1",
+ "react-player": "^2.16.0",
"s": "^1.0.0",
"update": "^0.7.4"
},
@@ -18817,6 +18818,11 @@
"node": ">=0.10.0"
}
},
+ "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/load-templates": {
"version": "0.11.4",
"resolved": "https://registry.npmjs.org/load-templates/-/load-templates-0.11.4.tgz",
@@ -20230,6 +20236,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/meow": {
"version": "3.7.0",
"resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
@@ -25594,6 +25605,21 @@
"react": ">=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-router": {
"version": "5.3.4",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
diff --git a/package.json b/package.json
index 7fdda17..d05e348 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-markdown": "^9.0.1",
+ "react-player": "^2.16.0",
"s": "^1.0.0",
"update": "^0.7.4"
},
diff --git a/src/components/VideoPlayer.js b/src/components/VideoPlayer.js
new file mode 100644
index 0000000..71f8cd8
--- /dev/null
+++ b/src/components/VideoPlayer.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactPlayer from 'react-player';
+
+export default function VideoPlayer({ url }) {
+ return (
+
+ );
+}
\ No newline at end of file