From e69bbcff643051af58f4c1729ac61b7d42540166 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 25 Nov 2024 16:14:39 -0600
Subject: [PATCH] feat(shs-5693): add drupal befaviours to video with caption
 js

---
 .../src/js/shared/media/video-with-caption.js | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js b/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js
index 3a893f068..76c693a9a 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/media/video-with-caption.js
@@ -2,17 +2,23 @@
 // This causes issues when there is a video in a figure because the video no longer
 // fills the entire space of the container.
 // This JS sets a width of 100% to figures that contain videos.
-const videos = document.querySelectorAll('.field-media-oembed-video');
+(function (Drupal) {
+  Drupal.behaviors.videoWithCaptionBehavior = {
+    attach(context) {
+      const videos = context.querySelectorAll('.field-media-oembed-video');
 
-if (videos && videos.length > 0) {
-  for (let i = 0; i < videos.length; i++) {
-    const video = videos[i];
-    if (video.parentNode && video.parentNode.parentNode && video.parentNode.parentNode.nodeName === 'FIGURE') {
-      const figure = video.parentNode.parentNode;
+      if (videos && videos.length > 0) {
+        for (let i = 0; i < videos.length; i++) {
+          const video = videos[i];
+          if (video.parentNode && video.parentNode.parentNode && video.parentNode.parentNode.nodeName === 'FIGURE') {
+            const figure = video.parentNode.parentNode;
 
-      if (figure.classList.contains('caption')) {
-        figure.style.width = '100%';
+            if (figure.classList.contains('caption')) {
+              figure.style.width = '100%';
+            }
+          }
+        }
       }
-    }
-  }
-}
+    },
+  };
+}(Drupal));