const VIDEOBG = ((w, d, undefined) => {
'use strict';
const selectors = {
theWrap: '.video-bg',
theTrigger: '.video-bg__control',
theVideo: '.video-bg video',
};
const classes = {
isPaused: 'is-paused',
isPlaying: 'is-playing',
};
const els = {};
const init = () => {
els.theWraps = d.querySelectorAll(selectors.theWrap);
[...els.theWraps].forEach((theWrap) => {
const theTrigger = theWrap.querySelector(selectors.theTrigger);
const theVideo = theWrap.querySelector(selectors.theVideo);
if (!theTrigger) { return; }
theTrigger.addEventListener('click', (e) => {
e.preventDefault();
toggleIt(theVideo, true);
});
if (!theVideo.hasAttribute('autoplay')) {
pauseIt(theVideo, true);
}
theVideo.addEventListener('play', () => {
theWrap.classList.add(classes.isPlaying);
});
theVideo.addEventListener('pause', () => {
theWrap.classList.remove(classes.isPlaying);
});
const observer = new IntersectionObserver((item) => {
!item[0].isIntersecting ? pauseIt(theVideo) : playIt(theVideo);
}, {
rootMargin: `0px`,
treshold: thresholdArray(20),
});
observer.observe(theWrap);
});
};
const toggleIt = (theVideo, forced) => {
if (!theVideo) { return; }
!theVideo.paused ? pauseIt(theVideo, forced) : playIt(theVideo, forced);
};
const pauseIt = (theVideo, forced) => {
if (!theVideo) { return; }
theVideo.pause();
forced && theVideo.classList.add(classes.isPaused);
};
const playIt = (theVideo, forced) => {
if (!theVideo) { return; }
forced && theVideo.classList.remove(classes.isPaused);
!theVideo.classList.contains(classes.isPaused) && theVideo.play();
};
const thresholdArray = steps => Array(steps + 1).fill(0).map((_, index) => index / steps || 0);
d.addEventListener('DOMContentLoaded', init);
return {
init,
pauseIt,
playIt,
selectors,
};
})(window, window.document);