Targeting Multiple Videos with jQuery

[svdvs]

Hey jrue!

This may be related to the 'multiple videos' issue referenced in the plugin documentation and in issue #8. I am trying to do some simple class swapping and styling with jQuery, and it is working, but only with the first video on the page. Is the 'multiple videos issue' affecting jQuery's implicit and explicit iteration, or am I just being foolish?

This is all the code related to the videos on the page. I am using Wordpress so I cannot hardcode IDs. Any ideas?

function playVideo(){
        $(this).removeClass('smallvideo');
        $(this).addClass('largevideo');
        var parentArticle = $(this).parent().parent();
        parentArticle.css('width','100%');
    };

    function stopVideo(){
        $(this).removeClass('largevideo');
        $(this).addClass('smallvideo');
        var parentArticle = $(this).parent().parent();
        parentArticle.css('width','50%');
    };

     $('iframe').each(function(){
        $(this).addClass('smallvideo');
        $(this).on('play',playVideo);
        $(this).on('pause',stopVideo);
     });

[svdvs]

Alright, well I was finally able to figure it out! If anyone is curious, I ended up looping through each iframe to give each video a unique ID, and then calling the 'play' and 'pause' methods on any element containing that ID. Here's the code:

    function playVideo(){
        $(this).removeClass('smallvideo');
        $(this).addClass('largevideo');
        var parentArticle = $(this).parent().parent();
        parentArticle.css('width','100%');
    };

    function stopVideo(){
        $(this).removeClass('largevideo');
        $(this).addClass('smallvideo');
        var parentArticle = $(this).parent().parent();
        parentArticle.css('width','50%');
    };

     $('iframe').each(function(index){
        $(this).addClass('smallvideo');
        var videoID = "video" + index;
        $(this).attr('id',videoID);
        var videoIndex = '?&api=1&player_id=video' + index,
        src = $(this).attr('src');
        $(this).attr('src', src + videoIndex);
     });

     $('*[id*=video]').each(function(){
        $(this).on('play',playVideo);
        $(this).on('pause',stopVideo);
     });

[jrue]

Sorry, haven't had time to look at this. Did you figure it out? Was it a problem with the code?

[svdvs]

No problem jrue! Wasn't a problem with the code. It was just another manifestation of the 'multiple videos on page' issue, plus me being fairly inexperienced with these sorts of things. Got it working now tho! Thanks for the great plugin.