I am building a one-page scrolling home page, with separate full-screen rows as the user scrolls down. I’d like to put different video backgrounds in each of these rows, however I need to delay these from beginning to play until each row has entered the viewport. Is this possible?
Currently, the videos in each row begin to play automatically when the page loads, so by the time the user scrolls down they’ve missed the intended video.
You can see the effect I’m trying achieve on the second row of the homepage on http://www.redfootyouththeatre.com.au/2016-home-page (best to refresh the page when on the second row to see what I’m trying to do, you’ll miss it if you have to scroll from the top).