https://www.irwintools.com/modules/custom/sbd_site_studio/js/background-video.js?tl1qfy

1(function ($, Drupal, once) {
2  Drupal.behaviors.backgroundVideo = {
3    attach: function (context, settings) {
4
5      const videoPlayButton = once('coh-js-video-init', context.querySelectorAll('.coh-style-page-hero .background-video-control-button'));
6      const pageHeaderVideoPlayButton = once('coh-js-video-init', context.querySelectorAll('.page-header-component .background-video-control-button'));
7      const html5video = !!document.createElement('video').canPlayType;
8      const motionQuery = matchMedia('(prefers-reduced-motion)');
9      const heroComponent = document.querySelectorAll('.coh-style-page-hero');
10      const pageHeaderComponent = document.querySelectorAll('.page-header-component');
11      const videos = document.querySelectorAll('.page-hero-background-video');
12      
13      // Animated GIF play control
14      const gifDetailsPanels = document.querySelectorAll('.gif-details');
15
16      const prefersReducedMotionQuery = window.matchMedia(
17        "(prefers-reduced-motion: reduce)"
18      );
19
20      if (!prefersReducedMotionQuery.matches) {
21        //   User does not have reduced motion set, enable the gifs by default
22        gifDetailsPanels.forEach(function(element) {
23          element.setAttribute('open', '');
24
25          if(element.hasAttribute('open', '')) {
26            setTimeout(function () {
27              element.removeAttribute("open");
28            }, 20000);
29          }
30        });
31      }
32
33      // Adds event listener to summary click so GIF can be paused after 20 seconds
34      gifDetailsPanels.forEach(function(element) {
35        const gifDetails = element.querySelector('summary');
36
37        gifDetails.addEventListener('click', function() {
38          setTimeout(function () {
39            if(element.hasAttribute("open", '')) {
40              setTimeout(function () {
41                element.removeAttribute("open");
42              }, 20000);
43            }
44          }, 100);
45          
46        });
47      });
48      
49      // for (let i = 0; i < gifDetailsPanels.length; i++) {        
50      //   if(gifDetailsPanels[i].hasAttribute("open", ''))
51      //   setTimeout(function () {
52      //     gifDetailsPanels[i].removeAttribute("open");
53      //   }, 20000);
54      // }
55
56      // Checks for prefers reduced motion and pauses video if needed
57      function reducedMotionCheck(videoPlayer, element) {
58        if (motionQuery.matches) {
59          videoPlayer.pause();
60          videoPlayer.classList.add('video-paused');
61          element.classList.remove('video-pause');
62          element.classList.add('video-play');
63          element.setAttribute('alt', 'Play background video');
64          videoPlayer.setAttribute('autoplay', 'false');
65        } if (!motionQuery.matches) {
66          videoPlayer.classList.add('video-playing');
67        }
68      }
69
70      // Set fallback image to display if video is not supported
71      heroComponent.forEach(function (element) {
72        const bynderBackgroundImage = element.querySelector('.bynder-media-container');
73        if (!html5video) {
74          bynderBackgroundImage.style.display = 'block';
75        }
76      });
77
78      // Set fallback image to display if video is not supported
79      pageHeaderComponent.forEach(function (element) {
80        const bynderBackgroundImage = element.querySelector('.bynder-media-container');
81        if (!html5video) {
82          bynderBackgroundImage.style.display = 'block';
83        }
84      });
85
86      // Find all videos for each play button and play/pause in page header component
87      pageHeaderVideoPlayButton.forEach(function (element) {
88        const videoPlayer = element.parentElement.nextElementSibling.querySelector('.page-header-component video');
89        backgroundVideo(element, videoPlayer);
90      });
91
92      // Find all videos for each play button and play/pause in page hero component
93      videoPlayButton.forEach(function (element) {
94        const videoPlayer = element.parentElement.nextElementSibling.querySelector('.page-hero-background-video video');
95        backgroundVideo(element, videoPlayer);
96      });
97
98      function backgroundVideo(element, videoPlayer) {
99
100        // Check if video is playing
101        const isVideoPlaying = videoPlayer =>

101 !!(videoPlayer.currentTime > 0 && !videoPlayer.paused && !videoPlayer.ended && videoPlayer.readyState > 2);
102
103        // If video is playing, pause after 20 seconds
104        if (isVideoPlaying) {
105          setTimeout(function () {
106            videoPlayer.pause();
107            videoPlayer.classList.remove('video-playing');
108            videoPlayer.classList.add('video-paused');
109            element.classList.remove('video-pause');
110            element.classList.add('video-play');
111            element.setAttribute('alt', 'Play background video');
112          }, 20000);
113        }
114
115
116        // Checks for reduced motion first
117        reducedMotionCheck(videoPlayer, element);
118
119        // Removes video if not supported 
120        if (!html5video) {
121          videoPlayer.removeAttribute('src');
122          videoPlayer.style.display = 'none';
123        }
124
125        // play or pause video on button click
126        element.addEventListener('click', function (event) {
127          event.preventDefault();
128          if (videoPlayer.paused === true) {
129            videoPlayer.play();
130            videoPlayer.classList.remove('video-paused');
131            videoPlayer.classList.add('video-playing');
132            element.classList.remove('video-play');
133            element.classList.add('video-pause');
134            element.setAttribute('alt', 'Pause background video');
135            setTimeout(function () {
136              videoPlayer.pause();
137              videoPlayer.classList.remove('video-playing');
138              videoPlayer.classList.add('video-paused');
139              element.classList.remove('video-pause');
140              element.classList.add('video-play');
141              element.setAttribute('alt', 'Play background video');
142            }, 20000);
143          } else {
144            videoPlayer.pause();
145            videoPlayer.classList.remove('video-playing');
146            videoPlayer.classList.add('video-paused');
147            element.classList.remove('video-pause');
148            element.classList.add('video-play');
149            element.setAttribute('alt', 'Play background video');
150            videoPlayer.setAttribute('autoplay', 'false');
151          }
152        });
153      }
154
155    }
156  };
157})(jQuery, Drupal, once);