Stop Vimeo video with javascript - inside a loop and using a modal window

Good night everyone, im trying to make a vimeo video stop when a tag are clicked. A modal window are called inside a "while loop". I found a code that use the vimeo api (http://jsfiddle.net/joan_r/dutzh512/) but this works only in my first video, the others doesn't stop when the tag are clicked.

This is how my code are going:

    script src="http://a.vimeocdn.com/js/froogaloop2.min.js"/script

    ?php

    $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
    $query_args = array(
        'post_type' = 'post',
        'order'   = 'DESC',
        'orderby'   = 'date',
        'paged' = $paged
    );

    $the_query = new WP_Query( $query_args );

    if ( $the_query-have_posts() ) : while ( $the_query-have_posts() ) : $the_query-the_post(); 

        $slug = $post-post_name;

        $thumb_id = get_post_thumbnail_id();
        $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true); 

        ?

        a href="#?php echo $slug ?" rel="modal"
            div class="thumb" style="background-image: url(?php if (has_post_thumbnail()) { echo $thumb_url[0]; } ?)"
                p class="legenda"?php the_title(); ?/p
            /div
        /a

        div class="window" id="?php echo $slug ?"
            ?php the_content(); ?
            a class="stop" href="#"STOP/a           
        /div

       script 

            var iframe = $('.video-player')[0];
            var player = $f(iframe);

            $('.stop').click(function() {
                //alert('stoped');
                player.api('unload');
            });

        /script 

    ?php endwhile; endif; ? 

    ?php wp_reset_postdata(); ?

This are working, but only in the first video. What im doing wrong?

Thank you.

Topic vimeo video-player api Wordpress

Category Web


Finally i got the solution:

        <script> 

            jQuery("#mascara").click(function() { 
                $('.video-player').each(function(index) {
                    $(this)[0].contentWindow.postMessage('{"method":"unload"}','*');


                });
            });

        </script>

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.