[ethereal]

document.addEventListener('DOMContentLoaded', function() {
    const lazyAnimate = divs => {
        divs.forEach(el => {
            let isInView = el.intersectionRatio > .4;
            let div = el.target;
            if (div.classList.contains('site--image---video')) div.classList.toggle('show', isInView);
            else {
                if (isInView) {
                    div.play();
                    //$(div).bgVideo();
                } else {
                    div.pause();
                    div.currentTime = 0;
                }
            }
        });
    }
    let observer = new IntersectionObserver(lazyAnimate, {
        rootMargin: "100px",
        threshold: [0.1, 0.8] //настроить видимость
    });
    let container = document.querySelectorAll('.site--video, .site--image---video');
    container.forEach(div => observer.observe(div))
});

Здравствуйте! Тот код который вы дали, не запускает видео на всех размерах блока. К примеру, один и тот же блок если ширину сделать 100% от контейнера, то все будет работать, видео запустится. А если ширину сделать 50% то видео уже на запускается, при это классы добавляються при любых размерах. При этом если блок с 50% сразу при загрузке в поле зрения, то видео запускается, но только первый раз, повторно не работает.

Никак не могу понять в чем дела, поменял значение на .1 в intersectionRatio работает по лучше, только теперь уже срабатывает когда блок только входит в поле зрения а не когда он полностью!

Может вы знаете в чем проблема и как это исправить?
Буду очень благодарен!

P.S можете рассказать по подробнее про эти параметры, на что они влияют, может удастся настроить как надо:

el.intersectionRatio > .4;
threshold: [0.1, 0.8]