Add NGIAB and Data Preprocess end-to-end flow video to documentation (#…

…214)

docs/products/Community Hydrologic Modeling Framework/nextgeninaboxDocker/index.md

@@ -14,3 +14,5 @@ tags:
 import GitHubReadme from '@site/src/components/GitHubReadme';
 
 <GitHubReadme username="CIROH-UA" repo="NGIAB-CloudInfra" />
+
+

docs/products/Community Hydrologic Modeling Framework/nextgeninaboxDocker/workflow.md

@@ -0,0 +1,21 @@
+---
+sidebar_position: 4
+title: "NGIAB Workflow Video"
+description: "NextGen In a Box (NGIAB) Workflow Video"
+tags:
+  - NextGen In A Box
+  - NGIAB
+  - NGIAB Data Preprocess
+  - Demonstration
+  - Video
+  - Workflow
+---
+
+# NGIAB and NGIAB Data Preprocess: 
+## End-to-End Workflow Demonstration
+
+This video demonstrates the complete end-to-end workflow of running the NextGen In A Box (NGIAB) with the NGIAB Data Preprocess. Watch as the Data Preprocess builds and validates input data, followed by NGIAB executing the NextGen model and handling the output.
+
+import VideoPlayer from '/src/components/VideoPlayer.js';
+
+<VideoPlayer url="https://youtu.be/Z1iov-o23ug"  />

src/components/VideoPlayer.js

@@ -1,8 +1,18 @@
 import React from 'react';
 import ReactPlayer from 'react-player';
 
-export default function VideoPlayer({ url }) {
+const ResponsivePlayer = ({ url }) => {
   return (
-    <ReactPlayer url={url} width="100%" height="400px" controls />
+    <div className="player-wrapper">
+      <ReactPlayer
+        className="react-player"
+        url={url}
+        width="100%"
+        height="100%"
+        controls
+      />
+    </div>
   );
-}
+};
+
+export default ResponsivePlayer;

src/css/custom.css

@@ -73,3 +73,38 @@
   margin-left: 1.3rem;
   margin-right: 1.3rem;
 }
+
+.player-wrapper {
+  position: relative;
+  padding-top: 56.25%; /* 16:9 Aspect Ratio */
+}
+
+.react-player {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+@media screen and (max-width: 768px) {
+  .player-wrapper {
+    padding-top: 75%; /* 4:3 Aspect Ratio for smaller screens */
+  }
+}
+
+@media (max-width: 1400px) {
+  :root {
+    /* Adjust the base font size to 90% of the original */
+    font-size: 90%;
+
+    /* Adjust other root variables */
+    --ifm-font-size-base: 90%;
+    --ifm-code-font-size: 90%;
+
+    /* Adjust sidebar widths */
+    --doc-sidebar-width: 240px !important; /* 240px * 0.9 */
+  }
+  body {
+    line-height: 1.5;
+  }
+
+}