Почему не работает jquery inview?

[ethereal]

Попробую этот код уже утром. Спасибо!

[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]

[ethereal]

Кажется нашел в чем проблема, я пробовал другой код, там была такая же проблема с запуском видео. Проблема в том что видео большое и выходит за пределами блока, хоть он и скрыт через css, но код определяет сам размер видео судя по всему.

https://i.ibb.co/6HdzY69/vid.png

В вашем коде наверное такая же проблема, можете пжл переделать его, сделать наверное для класса и видео отдельный код или как то по другому на ваше усмотрения. С меня советник по JS так себе! Может можно сделать что б сработал когда сам блок будет в поле зрения, не учитывая ту часть видео которое выходит за пределами.

Вот сам html блока если нужен:

<div class="site--image---video">
   <img src="images/01.jpg" alt="Image 01">
   <video class="site--video" controls muted loop>
      <source src="images/video.mp4" type="video/mp4">
   </video>
</div>

[рони]

threshold: [0.1, 0.8]

а почитать документацию? функция сработает два раза, когда блок будет виден на 10% и 80% --- 10 почти скрылся -- 80 почти открылся

el.intersectionRatio > .4; --- любое число больше .1 и меньше .8 --- блок виден если true.

нужен полноценный макет с css.
попробуйте так ...

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);
            let video = div.querySelector('.site--video');
                if (isInView) {
                    video.play();
                    //$(video).bgVideo();?? 
                } else {
                    video.pause();
                    video.currentTime = 0;
                }
        });
    }
    let observer = new IntersectionObserver(lazyAnimate, {
        rootMargin: "0px",
        threshold: [.1, .9] //настроить видимость
    });
    let container = document.querySelectorAll('.site--image---video');
    container.forEach(div => observer.observe(div))
});

[рони]

ethereal,
Intersection_Observer_API
Настройки

[ethereal]

Не работает так как надо. Пытаюсь настроить, но не очень выходит. К примеру, при загрузке страницы если блок частично в поле зрения то он срабатывает.

Вот тут сам код как на сайте, может вам удастся настроить
https://codepen.io/ethereal94/pen/vYyRoMv

Было бы хорошо чтоб он работал так:

Вход - при прокрутке по вертикали и горизонтали сработать сразу когда будет на 100% виден блок.

Выход - при прокрутке по вертикали скрыть когда блок уйдет на 70%;
Выход - при прокрутке по горизонтали скрыть сразу когда блок не будет виден на все 100%;

Если можно так сделать

[рони]

ethereal,
лучше скопировать код и создать отдельную страницу для просмотра

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
body {
    width: 4000px;
    height: 2000px;
}
.container {
    position: relative;
    width: 1000px;
    height: auto;
    border: 1px solid gray;
    margin: 0 auto;
}
.container > div {
    margin: 10px;
    display: inline-block;
    background: gray;
}
.site--image---video video::-webkit-media-controls ,.jquery-background-video-pauseplay {
    display:none !important;
}
.site--image---video {
    position: relative;
    overflow: visible;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
.site--video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;
}
.site--image---video img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 800ms ease;
    transition-delay: 0ms;
    z-index: 10;
}
.show.site--image---video img {
    opacity: 0;
    transition: all 800ms ease;
    transition-delay: 1200ms;
}
    </style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
    const lazyAnimate = divs => {
        divs.forEach(el => {
            let isInView = el.intersectionRatio > .8;
            let div = el.target;
            let site = div.querySelector('.site--image---video');
            site.classList.toggle('show', isInView);
            let video = div.querySelector('.site--video');
                if (isInView) {
                    video.play();
                } else {
                    video.pause();
                    video.currentTime = 0;
                }
        });
    }
    let observer = new IntersectionObserver(lazyAnimate, {
        rootMargin: "0px",
        threshold: [.7, .9] //настроить видимость
    });
    let container = document.querySelectorAll('.container > div');
    container.forEach(div => observer.observe(div))
  });
</script>
</head>
<body>
<div class="container">
    <div style="width: 980px; height: 560px;">
        <div class="site--image---video">
            <img src="https://images.pexels.com/photos/6900690/pexels-photo-6900690.jpeg">
            <video class="site--video" controls muted loop>
                <source src="http://www.w3schools.com/Tags/mov_bbb.mp4" type="video/mp4">
                <source src="http://www.w3schools.com/Tags/mov_bbb.ogg" type="video/ogg">
            </video>
        </div>
    </div>
    <div style="width: 475px; height: 360px;">
        <div class="site--image---video">
            <img src="https://images.pexels.com/photos/6900690/pexels-photo-6900690.jpeg">
            <video class="site--video" controls muted loop>
                <source src="http://www.w3schools.com/Tags/mov_bbb.mp4" type="video/mp4">
                <source src="http://www.w3schools.com/Tags/mov_bbb.ogg" type="video/ogg">
            </video>
        </div>
    </div>
    <div style="width: 475px; height: 360px;">
        <div class="site--image---video">
            <img src="https://images.pexels.com/photos/6900690/pexels-photo-6900690.jpeg">
            <video class="site--video" controls muted loop>
                <source src="http://www.w3schools.com/Tags/mov_bbb.mp4" type="video/mp4">
                <source src="http://www.w3schools.com/Tags/mov_bbb.ogg" type="video/ogg">
            </video>
        </div>
    </div>
</div>
</body>
</html>