Added NGIAB end-to-end flow video

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;