Воспроизведение видео, когда он находится в зоне видимости

Всем привет! Я наткнулась на одну проблему по поводу видимости элементов при прокрутке. У меня в коде внутри блока (у которого есть overflow: scroll) есть видео, и я хочу чтобы при прокрутке этого блока, когда мое видео появится в области видимости (или если будет видна какая-то часть видео, например видна только 100px высоты видео) она начала воспроизведение, а когда пропадет с области видимости она останавливается. Пожалуйста помогите!!! Очень нужно для одного проекта!!! Вот пример верстки моего кода: https://codepen.io/jsma305/pen/abvPgRE . И прошу вас показать код на чистом JS (или же подойдет какая нибудь библиотека, но желательно чистый код JS), ибо с JQuery еще не знакома. Спасибо))))