HTML Video
<div id='home-video' class="dl-neon-vid"><center>
<video playsinline loop muted autoplay width="100%">
<source src="video-link" />
</video></center>
</div>
<!-- script to pause ALL VIDEOS ON THE HOME PAGE when out of viewport -->
<script>
let options = {
root: null,
rootMargin:'0px',
threshold:1.0
};
let callback = (entries, observer)=>{
entries.forEach(entry => {
if(entry.target.id == 'home-video')
{
if(entry.isIntersecting){
entry.target.play();
}
else{
entry.target.pause();
}
}
});
}
let observer = new IntersectionObserver(callback, options);
observer.observe(document.querySelector('#home-video'));
</script>
Xerothermic Xenomorph