Jquery - target multiple child divs individually not simultaneously

Question

I have a div that has multiple looping videos. In order to improve performance i have the videos paused until they scroll into the viewport using this code:

 jQuery(window).on("load resize scroll",function(e){
        if (jQuery('#vid-container').visible(true)) {
               start_vid(); 
        } else {
            jQuery('iframe[id*="fitvid0"]').each(function () {
                 $f(this).api('pause');
            });
        }
    });
});

function start_vid(){
    jQuery('iframe[id*="fitvid0"]').each(function () {
                $f(this).api('setVolume', 0);
                $f(this).api('play');
            });
} 

This works but since each video iframe has the same ID they all start playing at the same time once #vid-container comes into view.

Im trying to figure out a way that I could target each vid Iframe individually so they would begin playing one by one as the scroll into view not simultaneously.

something like:

if (jQuery('#vid-container child2, #vid-container child3, #vid-container child4, #vid-container child5').visible(true)) {
start_vid();
}

Hope that makes sense.. thanks

ps im using jquery.visible plugin and vimeo api

Answer 1

Check visibility in the start_vid() function.

function start_vid(){
    $f('iframe[id*="fitvid0"]').each(function () {
        if ($f(this).visible(true)) {
            $f(this).api('setVolume', 0);
            $f(this).api('play');
        }
    });
}