https://www.blackanddecker.es/modules/custom/sbd_site_studio/js/video-modal.js?tl1qlh

1(function($) {
2  Drupal.behaviors.videoModal = {
3    attach: function(context, settings) {
4
5      const videoLinkButton = document.querySelectorAll('.coh-link[data-modal-open]');
6      const closeButton = document.getElementsByClassName('coh-modal-close-button');
7      const modalOverlay = document.getElementsByClassName('coh-modal-overlay');
8
9      // JavaScript Double-Click Avoidance
10      // Find all the video call to actions on a page
11      const videosCallToActionsOnPage = document.querySelectorAll('a.coh-style-play-video');
12      const videosModalThumbnailOnPage = document.querySelectorAll('.coh-style-video a.coh-link.video-link[data-trigger="true"]');
13      const videosInPlace = document.querySelectorAll('.coh-link.video-link.coh-interaction');
14
15      // This targets videos opened via CTA click
16      videosCallToActionsOnPage.forEach(function(element) {
17          // Identify the modal this click wants to open
18          const modalToOpen = element.dataset.modalOpen;
19          // Attach an onClick event listener to each video CTA, when these CTAs are clicked
20          // The code bellow will trigger
21          element.addEventListener('click', async function(event) {
22
23              // Select the modal that opens, the inner modal, the play button, and the video element
24              const videoModalToIntervene = await document.querySelector(`div.coh-modal#${modalToOpen}`);
25              const videoPlayButton = await videoModalToIntervene.querySelector(`.coh-modal a.video-link.coh-interaction`);
26              const theActualVideoElement = await videoModalToIntervene.querySelector(`.coh-video-html5 video`);
27              
28              // Synthetically click on the video button!
29              await videoPlayButton.click();
30
31              // Sets timeout to allow the iframe videos to render in DOM
32              setTimeout(() => {
33                const youTubeVideo = videoModalToIntervene.querySelector('.coh-video-youtube_iframe iframe');
34                const vimeoVideo = videoModalToIntervene.querySelector('.coh-video-vimeo_iframe iframe');
35   
36                // Checks for the type of video and plays
37                if (theActualVideoElement) {
38                  theActualVideoElement.play();
39                } else if (youTubeVideo) {
40                  youTubeVideo.contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
41                } else if (vimeoVideo) {
42                  var player = new Vimeo.Player(vimeoVideo);
43                  player.play();
44                };
45              }, "500");
46              
47          });
48      });
49
50      // This targets modal videos using a video thumbnail on page
51      videosModalThumbnailOnPage.forEach(function(element) {
52        // Identify the modal this click wants to open
53        const modalToOpen = element.dataset.modalOpen;
54        // Attach an onClick event listener to each video CTA, when these CTAs are clicked
55        // The code bellow will trigger
56        element.addEventListener('click', async function(event) {
57
58            // Select the modal that opens, the inner modal, the play button, and the video element
59            const videoModalToIntervene = await document.getElementById(`${modalToOpen}`);
60            const theActualVideoElement = await videoModalToIntervene.querySelector(`.coh-video-html5 video`);
61
62            // Sets timeout to allow the iframe videos to render in DOM
63            setTimeout(() => {
64              const youTubeVideo = videoModalToIntervene.querySelector('.coh-video-youtube_iframe iframe');
65              const vimeoVideo = videoModalToIntervene.querySelector('.coh-video-vimeo_iframe iframe');
66 
67              // Checks for the type of video and plays
68              if (theActualVideoElement) {
69                theActualVideoElement.play();
70              } else if (youTubeVideo) {
71                youTubeVideo.contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
72              } else if (vimeoVideo) {
73                var player = new Vimeo.Player(vimeoVideo);
74                player.play();
75              };
76            }, "500");
77            
78        });
79      });
80
81      // Pause page videos when opening a modal
82      for (let i = 0; i < videoLinkButton.length; i++) {
83        videoLinkButton[i].addEventListener('click', function() {
84
85          var 
86            videoElem = document.querySelectorAll('video'),
87            youTubeVideo = document.querySelectorAll('.coh-video-youtube_iframe iframe'),
88            vimeoVideo = document.querySelectorAll('.coh-video-vimeo_iframe iframe'),
89            isVideoPlaying = videoElem =>

89 !!(videoElem.currentTime > 0 && !videoElem.paused && !vivideoElemdeo.ended && videoElem.readyState > 2);
90
91          // Pause youtube videos on modal open
92          if (isVideoPlaying && youTubeVideo) {
93            for (let i = 0; i < youTubeVideo.length; i++) {
94              youTubeVideo[i].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
95            }
96          }
97
98          // Pause vimeo videos on modal open
99          if (isVideoPlaying && vimeoVideo) {
100            for (let i = 0; i < vimeoVideo.length; i++) {
101              var iframeSrc = vimeoVideo[i].src;
102              vimeoVideo[i].src = iframeSrc;
103            }
104          }
105            
106          // Pause videos on modal open
107          for (let i = 0; i < videoElem.length; i++) {
108            if (!videoElem[i].paused) {
109              videoElem[i].pause();
110            }
111          }  
112        });
113      }
114
115    }
116  };
117})(jQuery);