1window.onload = async function() { 2 var videoPlayers = document.querySelectorAll('.video-player'); 3 let bgplayers = []; 4 let fullplayers = []; 5 let allVideos = []; 6 7 videoPlayers.forEach((videoPlayer) => { 8 var playerID = videoPlayer.id; 9 var videoID = videoPlayer.dataset.videoid; 10 let videoStart = videoPlayer.dataset.videostart; 11 let videoEnd = videoPlayer.dataset.videoend; 12 var videoSettings = { 13 id: playerID, 14 videoid: videoID, 15 start: Number(videoStart), 16 end: Number(videoEnd) 17 }; 18 allVideos.push(videoSettings); 19 }); 20 21 var fullPlayers = document.querySelectorAll('.video-full'); 22 let fullVideos = []; 23 24 if (fullPlayers) { 25 fullPlayers.forEach((fullPlayer) => { 26 var fpID = fullPlayer.id; 27 var vID = fullPlayer.dataset.videoid; 28 var fullSettings = { 29 id: fpID, 30 videoid: vID, 31 }; 32 fullVideos.push(fullSettings); 33 }); 34 } 35 36 // Load YouTube API and wait for it to be ready 37 await loadYouTubeAPI(); 38 39 if (allVideos.length > 0) { 40 allVideos.forEach(setting => { 41 bgplayers.push(new YT.Player(setting.id, { 42 videoId: setting.videoid, 43 playerVars: { 44 rel: 0, 45 autoplay: 1, 46 loop: 1, 47 controls: 0, 48 showinfo: 0, 49 modestbranding: 0, 50 vq: 'hd1080', 51 start: setting.start, 52 end: setting.end 53 }, 54 events: { 55 onReady: onPlayerReady, 56 onStateChange: onPlayerStateChange 57 } 58 })); 59 }); 60 } 61 62 if (fullVideos.length > 0) { 63 fullVideos.forEach(setting => { 64 fullplayers.push(new YT.Player(setting.id, { 65 videoId: setting.videoid, 66 playerVars: { 67 rel: 0, 68 loop: 0, 69 captions: 1, 70 controls: 1, 71 showinfo: 0, 72 modestbranding: 0, 73 playsinline: 1, 74 vq: 'hd1080', 75 }, 76 events: { 77 onReady: onFullReady, 78 onStateChange: onFullStateChange 79 } 80 })); 81 }); 82 } 83 84 // Function to load YouTube API asynchronously 85 async function loadYouTubeAPI() { 86 return new Promise((resolve) => { 87 if (typeof YT === 'undefined' || typeof YT.Player === 'undefined') { 88 var tag = document.createElement('script'); 89 tag.src = "https://www.youtube.com/iframe_api"; 90 var firstScriptTag = document.getElementsByTagName('script')[0]; 91 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 92 93 window.onYouTubeIframeAPIReady = function() { 94 resolve(); 95 }; 96 } else { 97 resolve(); // API is already loaded 98 } 99 }); 100 } 101 102 // Player Ready Events 103 function onPlayerReady(event) { 104 var conID = event.target.getIframe().id; 105 var videoBtn = document.querySelector('[data-playfor="'+conID+'"]'); 106 if (videoBtn) { 107 var btnParent = videoBtn.parentElement.parentElement.parentElement; 108 videoBtn.addEventListener("click", (e) => { 109 btnParent.classList.toggle('active'); 110 if (btnParent.classList.contains('active')) { 111 event.target.playVideo(); 112 } else { 113 var vidStart = videoBtn.dataset.start; 114 event.target.seekTo(Number(vidStart)); 115 event.target.mute(); 116 } 117 }); 118 } 119 120 // append video title to .video-background 121 var vidTitleContainer = document.querySelector('p[data-title="'+event.target.playerInfo.videoData.video_id+'"]'); 122 vidTitleContainer.innerHTML += event.target.videoTitle; 123 124 // stop loop button 125 console.log("ID = "+event.target.getIframe().id); 126 console.log(event.target); 127 var loopID = conID.replace("player", 'loop'); 128 var loopBtn = document.querySelector('[data-loopcontrol="'+loopID+'"]'); 129 if ( loopBtn ) { 130 // on resume video click 131 loopBtn.addEventListener("click", (e) => { 132 if ( e.target.checked == true ) { 133 event.target.pauseVideo(); 134 } else { 135 event.target.playVideo(); 136 } 137 }); 138 } 139 140 // Mute and play the video 141 event.target.mute(); 142 event.target.playVideo(); 143 } 144 145 function onPlayerStateChange(event) { 146 if (event.data === YT.PlayerState.ENDED) { 147 event.target.mute(); 148 event.target.seekTo(event.target.getVideoData().start); 149 } 150 } 151 152 // Full Player Ready 153 function onFullReady(event) { 154 var conID = event.target.getIframe().id; 155 var fullID = conID.replace("full", 'player'); 156 var continueID = conID.replace("full", 'continue'); 157 var videoBtn = document.querySelector('[data-playfor="'+fullID+'"]'); 158 var continueBtn = document.querySelector('[data-continue="'+continueID+'"]'); 159 var loopID = conID.replace("full", 'loop'); 160 var loopBtn = document.querySelector('[data-loopcontrol="'+loopID+'"]'); 161 162 if (videoBtn) { 163 var btnParent = videoBtn.parentElement.parentElement.parentElement; 164 videoBtn.addEventListener("click", () => { 165 if (btnParent.classList.contains('active') && !btnParent.classList.contains('hover')) { 166 event.target.seekTo(0); 167 event.target.unMute(); 168 event.target.playVideo(); 169 videoBtn.ariaLabel = 'STOP VIDEO'; 170 if (event.data === YT.PlayerState.PAUSED) { 171 btnParent.classList.add('hover'); 172 } 173 } else { 174 btnParent.classList.remove('active'); 175 btnParent.classList.remove('hover'); 176 videoBtn.ariaLabel = 'PLAY FULL VIDEO'; 177 event.target.mute(); 178 event.target.stopVideo(); 179 if ( loopBtn ) { 180 // on resume video click 181 loopBtn.checked = false;
182 } 183 } 184 }); 185 186 if (continueBtn) { 187 continueBtn.addEventListener("click", () => { 188 if (btnParent.classList.contains('hover')) { 189 event.target.unMute(); 190 event.target.playVideo(); 191 btnParent.classList.remove('hover'); 192 } 193 }); 194 } 195 } 196 } 197 198 function onFullStateChange(event) { 199 var conID = event.target.getIframe().id; 200 var fullID = conID.replace("full", 'player'); 201 var videoBtn = document.querySelector('[data-playfor="'+fullID+'"]'); 202 var loopID = conID.replace("full", 'loop'); 203 var loopBtn = document.querySelector('[data-loopcontrol="'+loopID+'"]'); 204 205 // if video paused 206 if (event.data === YT.PlayerState.PAUSED) { 207 if ( videoBtn ) { 208 var btnParent = videoBtn.parentElement.parentElement.parentElement; 209 btnParent.classList.add('hover'); 210 } 211 } 212 213 // if video ends 214 if (event.data === YT.PlayerState.ENDED) { 215 if (videoBtn) { 216 var btnParent = videoBtn.parentElement.parentElement.parentElement; 217 btnParent.classList.remove('active'); 218 btnParent.classList.remove('hover'); 219 event.target.unMute(); 220 event.target.stopVideo(); 221 if ( loopBtn ) { 222 // on resume video click 223 loopBtn.checked = false; 224 } 225 } 226 } 227 228 // if player is playing 229 if (event.data === YT.PlayerState.PLAYING || event.data === YT.PlayerState.BUFFERING) { 230 if ( videoBtn ) { 231 var btnParent = videoBtn.parentElement.parentElement.parentElement; 232 btnParent.classList.remove('hover'); 233 } 234 } 235 } 236}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.