https://www.dowty.com/modules/custom/aeroblox/js/hero-video.js?v=11.3.14

1// ##########################  youtube-api.js ###########################################################################
2
3
4//This code loads the IFrame Player API code asynchronously.
5document.addEventListener('DOMContentLoaded',()=>{
6    var tag = document.createElement('script');
7tag.src = "https://www.youtube.com/iframe_api";
8var firstScriptTag = document.getElementsByTagName('script')[0];
9firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
10
11// Load Vimeo API
12var vimeoTag = document.createElement('script');
13vimeoTag.src = "https://player.vimeo.com/api/player.js";
14firstScriptTag.parentNode.insertBefore(vimeoTag, firstScriptTag);
15
16let ytVideoPlayer1, ytVideoPlayer2, ytVideoPlayer3, ytVideoPlayer4, ytVideoPlayer5;
17let vimeoPlayer1, vimeoPlayer2, vimeoPlayer3, vimeoPlayer4, vimeoPlayer5;
18ytVideoElm1 = document.querySelector('[hero-video-instance-id="1"] .yt-modal');
19ytVideoElm2 = document.querySelector('[hero-video-instance-id="2"] .yt-modal');
20ytVideoElm3 = document.querySelector('[hero-video-instance-id="3"] .yt-modal');
21ytVideoElm4 = document.querySelector('[hero-video-instance-id="4"] .yt-modal');
22ytVideoElm5 = document.querySelector('[hero-video-instance-id="5"] .yt-modal');
23
24if (ytVideoElm1) {
25    modalVideoYTVidID1 = ytVideoElm1.querySelector('.play-icon-container').getAttribute('data-video-id');
26    modalVideoID1 = 'hero-modal-1';
27    videoType1 = ytVideoElm1.getAttribute('data-video-type');
28}
29
30if (ytVideoElm2) {
31    modalVideoYTVidID2 = ytVideoElm2.querySelector('.play-icon-container').getAttribute('data-video-id');
32    modalVideoID2 = 'hero-modal-2';
33    videoType2 = ytVideoElm2.getAttribute('data-video-type');
34}
35
36if (ytVideoElm3) {
37    modalVideoYTVidID3 = ytVideoElm3.querySelector('.play-icon-container').getAttribute('data-video-id');
38    modalVideoID3 = 'hero-modal-3';
39    videoType3 = ytVideoElm3.getAttribute('data-video-type');
40}
41
42if (ytVideoElm4) {
43    modalVideoYTVidID4 = ytVideoElm4.querySelector('.play-icon-container').getAttribute('data-video-id');
44    modalVideoID4 = 'hero-modal-4';
45    videoType4 = ytVideoElm4.getAttribute('data-video-type');
46}
47
48if (ytVideoElm5) {
49    modalVideoYTVidID5 = ytVideoElm5.querySelector('.play-icon-container').getAttribute('data-video-id');
50    modalVideoID5 = 'hero-modal-5';
51    videoType5 = ytVideoElm5.getAttribute('data-video-type');
52}
53// storing player value in one variable
54let createdPlayer;
55let createdVimeoPlayer;
56
57// Dynamic Function to create player for each modal
58function onYouTubeIframeAPIReady(player, videoId) {
59    // checking if previous version of player exist -> If yes destroy.
60    if(createdPlayer){
61        createdPlayer.destroy();
62    }
63    return createdPlayer= new YT.Player(player, {
64        videoId: videoId,
65        playerVars: {
66            'playsinline': 1,
67            'autoplay':1
68        },
69        events: {
70            'onReady': (e) => e.target.playVideo()
71
72        }
73    });
74}
75
76// Vimeo Player initialization
77function initVimeoPlayer(player, videoId) {
78    // Check if iframe already exists and remove it
79    const playerContainer = document.getElementById(player);
80    if(playerContainer) {
81        const existingIframe = playerContainer.querySelector('iframe');
82        if(existingIframe) {
83            existingIframe.remove();
84        }
85    }
86    
87    // Create new iframe for Vimeo
88    const iframe = document.createElement('iframe');
89    iframe.src = `https://player.vimeo.com/video/${videoId}?h=your_hash&autoplay=1&loop=1&autopause=0&muted=0`;
90    iframe.width = '100%';
91    iframe.height = '100%';
92    iframe.frameBorder = '0';
93    iframe.allow = 'autoplay; fullscreen; picture-in-picture';
94    iframe.allowFullscreen = true;
95    
96    document.getElementById(player).appendChild(iframe);
97    
98    if (window.Vimeo) {
99        createdVimeoPlayer = new Vimeo.Player(iframe);
100        createdVimeoPlayer.ready().then(() => {
101            createdVimeoPlayer.play();
102        });
103    }
104}
105
106// open Modal
107let youtubeModalVideoID = document.querySelectorAll(".hero-vid-btn");
108
109for (let modalVideoItem = 0; modalVideoItem < youtubeModalVideoID.length; modalVideoItem++) {
110
111    youtubeModalVideoID[modalVideoItem].addEventListener("click", function () {
112        // let ytIframeVideoModal, modalIntstanceID;
113
114        let modalIntstanceID = this.closest('.wp-block-aero-hero-video').getAttribute('hero-video-instance-id');
115        let modalElement = this.closest('.wp-block-aero-hero-video').querySelector('[hero-modal-instance-id="' + modalIntstanceID + '"]');
116        let videoType = modalElement.getAttribute('data-video-type');
117        
118        // Handle YouTube
119        if (videoType === 'youtube') {
120            //Calling the dynamic function
121            if (ytVideoElm1 && modalIntstanceID === "1") { onYouTubeIframeAPIReady(modalVideoID1, modalVideoYTVidID1); return }
122            if (ytVideoElm2 && modalIntstanceID === "2") { onYouTubeIframeAPIReady(modalVideoID2, modalVideoYTVidID2); return }
123            if (ytVideoElm3 && modalIntstanceID === "3") { onYouTubeIframeAPIReady(modalVideoID3, modalVideoYTVidID3); return }
124            if (ytVideoElm4 && modalIntstanceID === "4") { onYouTubeIframeAPIReady(modalVideoID4, modalVideoYTVidID4); return }
125            if (ytVideoElm5 && modalIntstanceID === "5") { onYouTubeIframeAPIReady(modalVideoID5, modalVideoYTVidID5); return }
126        }
127        
128        // Handle Vimeo
129        if (videoType === 'vimeo') {
130            let vimeoVideoId = modalElement.querySelector('.play-icon-container').getAttribute('data-video-id');
131            let vimeoModalId = `hero-modal-vimeo-${modalIntstanceID}`;
132            initVimeoPlayer(vimeoModalId, vimeoVideoId);
133        }
134
135    });
136
137}
138

139// Close Modal Script
140function heroVideoCloseModal(elm) {
141    let $this = elm
142    let closeModalID, modalIntstanceID;
143
144    if ($this.classList.contains('modal-close')) {
145        closeModalID = $this.closest('.modal');
146
147        if ($this.closest('.modal').classList.contains('yt-modal')) {
148            modalIntstanceID = $this.closest('.modal').getAttribute('hero-modal-instance-id');
149            let videoType = $this.closest('.modal').getAttribute('data-video-type');
150            
151            // Stop YouTube video
152            if (videoType === 'youtube' && createdPlayer) {
153                createdPlayer.stopVideo();
154            }
155            
156            // Stop Vimeo video
157            if (videoType === 'vimeo' && createdVimeoPlayer) {
158                createdVimeoPlayer.pause();
159            }
160        }
161    }
162    else if ($this.classList.contains('modal')) {
163        closeModalID = $this;
164
165        if ($this.classList.contains('yt-modal')) {
166            modalIntstanceID = $this.closest('.modal').getAttribute('hero-modal-instance-id');
167            let videoType = $this.getAttribute('data-video-type');
168            
169            // Stop YouTube video
170            if (videoType === 'youtube' && createdPlayer) {
171                createdPlayer.stopVideo();
172            }
173            
174            // Stop Vimeo video
175            if (videoType === 'vimeo' && createdVimeoPlayer) {
176                createdVimeoPlayer.pause();
177            }
178        }
179    }
180}
181
182
183// close modal when click on close icon
184let videoModalCloseClass = document.getElementsByClassName("modal-close");
185for (let modalcloseItem = 0; modalcloseItem < videoModalCloseClass.length; modalcloseItem++) {
186    videoModalCloseClass[modalcloseItem].addEventListener("click", function (event) {
187        heroVideoCloseModal(this);
188    });
189}
190
191// close modal when click outside of modal
192document.addEventListener("click", function (event) {
193    let videoModalClose = document.querySelectorAll('.modal');
194    for (let modalVideoClose = 0; modalVideoClose < videoModalClose.length; modalVideoClose++) {
195        if (event.target == videoModalClose[modalVideoClose]) {
196            heroVideoCloseModal(videoModalClose[modalVideoClose]);
197        }
198    }
199});
200});