From 167a4ebfcb05ad24cc2fe4f7cba5ad6e8ff8b66a Mon Sep 17 00:00:00 2001
From: Manjila Singh <singh.manjila02@gmail.com>
Date: Thu, 19 Sep 2024 16:29:21 +0100
Subject: [PATCH 1/2] Update css for smaller screen

---
 src/css/custom.css | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/css/custom.css b/src/css/custom.css
index bce09cd..446e01d 100644
--- a/src/css/custom.css
+++ b/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;
+  }
+  
+}
\ No newline at end of file

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 2/2] 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;