From b81c3cd3ba01e28afbfa13fdc01384bbc6084ce2 Mon Sep 17 00:00:00 2001
From: Manjila Singh <singh.manjila02@gmail.com>
Date: Thu, 19 Sep 2024 16:30:15 +0100
Subject: [PATCH] Added NGIAB end-to-end flow video

---
 .../nextgeninaboxDocker/index.md              |  2 ++
 .../nextgeninaboxDocker/workflow.md           | 21 +++++++++++++++++++
 src/components/VideoPlayer.js                 | 16 +++++++++++---
 3 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 docs/products/Community Hydrologic Modeling Framework/nextgeninaboxDocker/workflow.md

diff --git a/docs/products/Community Hydrologic Modeling Framework/nextgeninaboxDocker/index.md b/docs/products/Community Hydrologic Modeling Framework/nextgeninaboxDocker/index.md
index d710c0b..4ab3d1a 100644
--- a/docs/products/Community Hydrologic Modeling Framework/nextgeninaboxDocker/index.md	
+++ b/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" />
+
+
diff --git a/docs/products/Community Hydrologic Modeling Framework/nextgeninaboxDocker/workflow.md b/docs/products/Community Hydrologic Modeling Framework/nextgeninaboxDocker/workflow.md
new file mode 100644
index 0000000..37c576d
--- /dev/null
+++ b/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"  />
\ No newline at end of file
diff --git a/src/components/VideoPlayer.js b/src/components/VideoPlayer.js
index 71f8cd8..ee7c988 100644
--- a/src/components/VideoPlayer.js
+++ b/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>
   );
-}
\ No newline at end of file
+};
+
+export default ResponsivePlayer;