I will just say that the principle how to I am trying to explain can be applied on iframe with BG video full video or on both it doesn’t mother.
Here is list of steps but if is not correct (not what you trying achieve) just ignore it.
- grab all wrappers
- add event listener on scroll to check if wrapper is in viewport
2.1 in scroll listener add condition to do several things for two iframes (you can set offset)
- stop/rewind full video and mute sound
- display BG video when current wrapper 100% out of viewport
trueplay BG video (optional)
- on click hide BG video and play full video
as you don’t mind continuously playing BG videos out of viewport you can skip step 3 for BG video iframe.