From fde432a75a4f49e3ea089157dfcd2f7097c36e3f Mon Sep 17 00:00:00 2001
From: Sbragul26 <sbragul26@gmail.com>
Date: Thu, 21 May 2026 08:43:15 +0530
Subject: [PATCH 1/5] fix(videos): fix active tab on direct navigation

Signed-off-by: Sbragul26 <sbragul26@gmail.com>
---
 .../partials/video-category-navigation.html   | 47 +++++++++++++++++++
 layouts/video/baseof.html                     |  1 +
 2 files changed, 48 insertions(+)
 create mode 100644 layouts/partials/video-category-navigation.html

diff --git a/layouts/partials/video-category-navigation.html b/layouts/partials/video-category-navigation.html
new file mode 100644
index 00000000000..ab88642968f
--- /dev/null
+++ b/layouts/partials/video-category-navigation.html
@@ -0,0 +1,47 @@
+{{ $pathToHashMap := dict }}
+{{ $videos := .Site.GetPage "section" "videos" }}
+{{ if $videos }}
+  {{ range $mainIndex, $mainSection := $videos.Sections }}
+    {{ $mainPath := $mainSection.RelPermalink }}
+    {{ if not (hasPrefix $mainPath "/") }}
+      {{ $mainPath = "/" | add $mainPath }}
+    {{ end }}
+    {{ $pathToHashMap = merge $pathToHashMap (dict $mainPath (printf "category-%d-subcategory-0" $mainIndex)) }}
+    {{ range $subIndex, $subSection := $mainSection.Sections }}
+      {{ $subPath := $subSection.RelPermalink }}
+      {{ if not (hasPrefix $subPath "/") }}
+        {{ $subPath = "/" | add $subPath }}
+      {{ end }}
+      {{ $pathToHashMap = merge $pathToHashMap (dict $subPath (printf "category-%d-subcategory-%d" $mainIndex $subIndex)) }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+
+<div id="video-hash-map" data-map='{{ $pathToHashMap | jsonify | safeHTMLAttr }}' style="display:none"></div>
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+  const mapEl = document.getElementById('video-hash-map');
+  const pathToHashMap = mapEl ? JSON.parse(mapEl.dataset.map || '{}') : {};
+
+  const normalize = (href) => {
+    try {
+      const u = new URL(href, location.origin);
+      const p = u.pathname;
+      return p.endsWith('/') ? p : p + '/';
+    } catch (_) { return href || ''; }
+  };
+
+  const currentPath = normalize(window.location.pathname);
+  if (!window.location.hash && pathToHashMap[currentPath]) {
+    window.location.hash = pathToHashMap[currentPath];
+  }
+
+  document.querySelectorAll("a[href^='/videos/'], a[href*='/videos/']").forEach(link => {
+    const key = normalize(link.getAttribute('href') || '');
+    const hash = pathToHashMap[key];
+    if (hash) link.setAttribute('href', key + '#' + hash);
+  });
+});
+</script>
+
+
diff --git a/layouts/video/baseof.html b/layouts/video/baseof.html
index 395dec3e888..7f988f54859 100644
--- a/layouts/video/baseof.html
+++ b/layouts/video/baseof.html
@@ -32,6 +32,7 @@
       </div>
       {{ partial "footer.html" . }}
     </div>
+    {{partial "video-category-navigation.html" .}}
     {{ partial "scripts.html" . }} {{ partial "image-modal.html" . }}
   </body>
 </html>

From d995b17184c832f3db9e08dc43e42802f4e6c9a4 Mon Sep 17 00:00:00 2001
From: Sbragul26 <sbragul26@gmail.com>
Date: Thu, 21 May 2026 13:13:27 +0530
Subject: [PATCH 2/5] fix: navigation URL and footer flicker issue

Signed-off-by: Sbragul26 <sbragul26@gmail.com>
---
 assets/scss/_video-landing_project.scss  | 14 +++++++
 layouts/partials/video-landing-page.html | 53 ++++++++++--------------
 2 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/assets/scss/_video-landing_project.scss b/assets/scss/_video-landing_project.scss
index 5123f6c4751..d61c214af3e 100644
--- a/assets/scss/_video-landing_project.scss
+++ b/assets/scss/_video-landing_project.scss
@@ -241,6 +241,20 @@ a#videoPageLink:focus {
     margin-bottom: 2rem;
 }
 
+.video-grid-container {
+    position: relative;
+    min-height: 500px;
+    transition: min-height 0.15s ease;
+}
+
+.video-group {
+    position: absolute;
+    width: 100%;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+}
+
 .video-card {
     background-color: rgba(18,18,18,1);
     border-radius: 12px;
diff --git a/layouts/partials/video-landing-page.html b/layouts/partials/video-landing-page.html
index 650b8749331..ce32da09315 100644
--- a/layouts/partials/video-landing-page.html
+++ b/layouts/partials/video-landing-page.html
@@ -7,7 +7,7 @@
     <div class="category-tabs">
       {{ $currentPage := . }}
       {{ range $index, $section := $videoContentDir.Sections }}
-        <a href="#category-{{ $index }}" class="category-tab" data-category="{{ $index }}">
+        <a href="{{ .RelPermalink }}#category-{{ $index }}" class="category-tab" data-category="{{ $index }}">
           <div class="tab-icon">
             {{ if .Params.icon }}
               {{ if hasPrefix .Params.icon "bi" }}
@@ -32,14 +32,14 @@
                 <!-- if a category has at least 1 subcategory -->
               {{ if gt (len .Sections) 0 }}
                 {{ range $subIndex, $subSection := .Sections }}
-                  <a href="#category-{{ $mainIndex }}-subcategory-{{ $subIndex }}" class="subcategory-btn" 
+                  <a href="{{ .RelPermalink }}#category-{{ $mainIndex }}-subcategory-{{ $subIndex }}" class="subcategory-btn" 
                      data-main-category="{{ $mainIndex }}" data-subcategory="{{ $subIndex }}">
                     {{ .Title }}
                   </a>
                 {{ end }}
               {{ else }}
                 <!-- if no subcategories i.e. videos are directly in category folder: set a default "All" subcategory  -->
-                <a href="#category-{{ $mainIndex }}-subcategory-main" class="subcategory-btn" 
+                <a href="{{ $mainSection.RelPermalink }}#category-{{ $mainIndex }}-subcategory-main" class="subcategory-btn" 
                    data-main-category="{{ $mainIndex }}" data-subcategory="main">
                   All
                 </a>
@@ -55,7 +55,7 @@
         {{ range $mainIndex, $mainSection := $videoContentDir.Sections }}
           <!-- display videos from subcategories -->
           {{ range $subIndex, $subSection := .Sections }}
-            <div class="video-group" id="video-group-{{ $mainIndex }}-{{ $subIndex }}" style="display: none;">
+            <div class="video-group" id="video-group-{{ $mainIndex }}-{{ $subIndex }}">
               <div class="video-grid">
                 {{ range $subSection.Pages }}
                   <div class="video-card" 
@@ -106,7 +106,7 @@ <h3>{{ .Title }}</h3>
           
           <!-- for direct videos in main category (when no subcategories) -->
           {{ if eq (len .Sections) 0 }}
-            <div class="video-group" id="video-group-{{ $mainIndex }}-0" style="display: none;">
+            <div class="video-group" id="video-group-{{ $mainIndex }}-0">
               <div class="video-grid">
                 {{ range where $mainSection.Pages "Kind" "page" }}
                   <div class="video-card"
@@ -208,39 +208,30 @@ <h3>{{ .Title }}</h3>
            if (currentSubcategoryBtns.length > 0 && subCategoryIndex < currentSubcategoryBtns.length) {
              currentSubcategoryBtns[subCategoryIndex].classList.add('active');
            }
-           
+
+
            // show/hide video groups
            const videoGroups = document.querySelectorAll('.video-group');
-           videoGroups.forEach(group => group.style.display = 'none');
+           videoGroups.forEach(group => {
+             group.style.opacity = '0';
+             group.style.pointerEvents = 'none';
+           });
            const activeVideoGroup = document.getElementById(`video-group-${mainCategoryIndex}-${subCategoryIndex}`);
            if (activeVideoGroup) {
-             activeVideoGroup.style.display = 'block';
+             activeVideoGroup.style.opacity = '1';
+             activeVideoGroup.style.pointerEvents = 'auto';
+             syncContainerHeight(activeVideoGroup);
            }
-           
-           // update url hash, can later modify this to have 
-           // this: category-getting-started-subcategory-onboarding
-           // instead of: category-0-subcategory-1
-   
-           window.location.hash = `category-${mainCategoryIndex}-subcategory-${subCategoryIndex}`;
          }
          
-         // Add click handlers to main category tabs
-         categoryTabs.forEach((tab, index) => {
-           tab.addEventListener('click', function(e) {
-             e.preventDefault();
-             updateContent(index);
-           });
-         });
-         
-         // Add click handlers to subcategory buttons
-         subcategoryBtns.forEach(btn => {
-           btn.addEventListener('click', function(e) {
-             e.preventDefault();
-             const mainCategoryIndex = parseInt(this.getAttribute('data-main-category'));
-             const subCategoryIndex = parseInt(this.getAttribute('data-subcategory'));
-             updateContent(mainCategoryIndex, subCategoryIndex);
-           });
-         });
+         // sync container height to prevent collapse
+         function syncContainerHeight(activeGroup) {
+           const containerEl = document.querySelector('.video-grid-container');
+           if (activeGroup && containerEl) {
+             const height = activeGroup.scrollHeight;
+             containerEl.style.minHeight = height + 'px';
+           }
+         }
          
          // handle initial load and urL hash changes
          function handleHashChange() {

From 74de6c972cec09c4db0e8894d40f6a9e8763ba31 Mon Sep 17 00:00:00 2001
From: Sbragul26 <sbragul26@gmail.com>
Date: Thu, 21 May 2026 13:32:22 +0530
Subject: [PATCH 3/5] refactor: address review feedback

Signed-off-by: Sbragul26 <sbragul26@gmail.com>
---
 .../partials/video-category-navigation.html   | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/layouts/partials/video-category-navigation.html b/layouts/partials/video-category-navigation.html
index ab88642968f..185e1cba80c 100644
--- a/layouts/partials/video-category-navigation.html
+++ b/layouts/partials/video-category-navigation.html
@@ -1,4 +1,4 @@
-{{ $pathToHashMap := dict }}
+{{ $.Scratch.Set "pathToHashMap" dict }}
 {{ $videos := .Site.GetPage "section" "videos" }}
 {{ if $videos }}
   {{ range $mainIndex, $mainSection := $videos.Sections }}
@@ -6,18 +6,18 @@
     {{ if not (hasPrefix $mainPath "/") }}
       {{ $mainPath = "/" | add $mainPath }}
     {{ end }}
-    {{ $pathToHashMap = merge $pathToHashMap (dict $mainPath (printf "category-%d-subcategory-0" $mainIndex)) }}
+    {{ $.Scratch.SetInMap "pathToHashMap" $mainPath (printf "category-%d-subcategory-0" $mainIndex) }}
     {{ range $subIndex, $subSection := $mainSection.Sections }}
       {{ $subPath := $subSection.RelPermalink }}
       {{ if not (hasPrefix $subPath "/") }}
         {{ $subPath = "/" | add $subPath }}
       {{ end }}
-      {{ $pathToHashMap = merge $pathToHashMap (dict $subPath (printf "category-%d-subcategory-%d" $mainIndex $subIndex)) }}
+      {{ $.Scratch.SetInMap "pathToHashMap" $subPath (printf "category-%d-subcategory-%d" $mainIndex $subIndex) }}
     {{ end }}
   {{ end }}
 {{ end }}
 
-<div id="video-hash-map" data-map='{{ $pathToHashMap | jsonify | safeHTMLAttr }}' style="display:none"></div>
+<div id="video-hash-map" data-map='{{ $.Scratch.Get "pathToHashMap" | jsonify }}' style="display:none"></div>
 <script>
 document.addEventListener('DOMContentLoaded', function () {
   const mapEl = document.getElementById('video-hash-map');
@@ -36,10 +36,17 @@
     window.location.hash = pathToHashMap[currentPath];
   }
 
-  document.querySelectorAll("a[href^='/videos/'], a[href*='/videos/']").forEach(link => {
-    const key = normalize(link.getAttribute('href') || '');
-    const hash = pathToHashMap[key];
-    if (hash) link.setAttribute('href', key + '#' + hash);
+  document.querySelectorAll("a[href*='/videos/']").forEach(link => {
+    try {
+      const url = new URL(link.href);
+      if (url.origin !== window.location.origin || url.hash) return;
+      const pathKey = url.pathname.endsWith('/') ? url.pathname : url.pathname + '/';
+      const hash = pathToHashMap[pathKey];
+      if (hash) {
+        url.hash = hash;
+        link.href = url.toString();
+      }
+    } catch (_) {}
   });
 });
 </script>

From abdd2f065895f9a8d90aada3a99b6e165ebd8d9c Mon Sep 17 00:00:00 2001
From: Sbragul26 <sbragul26@gmail.com>
Date: Thu, 21 May 2026 14:47:26 +0530
Subject: [PATCH 4/5] fix: support subdirectory deployments for video paths

Signed-off-by: Sbragul26 <sbragul26@gmail.com>
---
 .../partials/video-category-navigation.html   | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/layouts/partials/video-category-navigation.html b/layouts/partials/video-category-navigation.html
index 185e1cba80c..e5566ff5363 100644
--- a/layouts/partials/video-category-navigation.html
+++ b/layouts/partials/video-category-navigation.html
@@ -23,16 +23,15 @@
   const mapEl = document.getElementById('video-hash-map');
   const pathToHashMap = mapEl ? JSON.parse(mapEl.dataset.map || '{}') : {};
 
-  const normalize = (href) => {
-    try {
-      const u = new URL(href, location.origin);
-      const p = u.pathname;
-      return p.endsWith('/') ? p : p + '/';
-    } catch (_) { return href || ''; }
+  const extractVideoPath = (pathname) => {
+    const match = pathname.match(/\/videos\/.*/);
+    if (!match) return null;
+    const path = match[0];
+    return path.endsWith('/') ? path : path + '/';
   };
 
-  const currentPath = normalize(window.location.pathname);
-  if (!window.location.hash && pathToHashMap[currentPath]) {
+  const currentPath = extractVideoPath(window.location.pathname);
+  if (currentPath && !window.location.hash && pathToHashMap[currentPath]) {
     window.location.hash = pathToHashMap[currentPath];
   }
 
@@ -40,10 +39,9 @@
     try {
       const url = new URL(link.href);
       if (url.origin !== window.location.origin || url.hash) return;
-      const pathKey = url.pathname.endsWith('/') ? url.pathname : url.pathname + '/';
-      const hash = pathToHashMap[pathKey];
-      if (hash) {
-        url.hash = hash;
+      const pathKey = extractVideoPath(url.pathname);
+      if (pathKey && pathToHashMap[pathKey]) {
+        url.hash = pathToHashMap[pathKey];
         link.href = url.toString();
       }
     } catch (_) {}

From 2198c648659a7b66cdf9633bb26cccfd1eeab944 Mon Sep 17 00:00:00 2001
From: Sbragul26 <sbragul26@gmail.com>
Date: Thu, 21 May 2026 15:10:40 +0530
Subject: [PATCH 5/5] fix(videos): fix YouTube shortcode syntax in template
 video

Signed-off-by: Sbragul26 <sbragul26@gmail.com>
---
 content/en/videos/template-category/sub-category/video-1.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/content/en/videos/template-category/sub-category/video-1.md b/content/en/videos/template-category/sub-category/video-1.md
index bb14183de04..d04a2c388b9 100644
--- a/content/en/videos/template-category/sub-category/video-1.md
+++ b/content/en/videos/template-category/sub-category/video-1.md
@@ -11,5 +11,4 @@ tags: [] # example: [review, collaboration, comments] # also available as hyperl
 duration: 2:30 # optional, duration of the video in minutes:seconds format, "min" is automatically appended the duration
 ---
 
-{{< youtube id=videoId class="youtube-embed-container" >}}
-<!-- example:  {{< youtube bb6J--aApk8 >}} -->
\ No newline at end of file
+{{< youtube id=bb6J--aApk8 class="yt-embed-container" >}}
\ No newline at end of file