스크롤 내려서 화면에 동영상이 보일 때만 재생

document.querySelector('.modal').addEventListener('scroll', function() {
    document.querySelectorAll('.video_wrap video').forEach(function(video) {                    
        const videoHeight = video.clientHeight; //비디오 높이
        const videoTop = video.getBoundingClientRect().top - videoHeight; 

        if (videoTop < 0 && videoTop > -(videoHeight + videoHeight / 2)) { // 여유사이즈 동영상 높이의 절반
            video.play();
        } else {
            video.pause();
        }
    });
});

const videoTop = video.getBoundingClientRect().top - videoHeight; 

getBoundingClientRect().top => 화면 상단으로부터의 비디오 거리이고
비디오가 화면 상단까지 안오고 하단에 걸쳐도 재생되어야하니까 높이값 빼줌. 

 

그냥 스크롤 내리면 순서대로만 재생이 될까 하다가 화면에서 사라지면 동영상 재생이 멈추는게 나은 것 같았다.

화면에 절반은 걸쳐있을때까지는 재생되는 걸로 바꿔서 -( videoHeight + videoHeight/ 2) 를 추가했다.