jqueryregexembedvimeo

open vimeo url in colorbox using jQuery filter


I would like to use jQuery to scan a html page - created in this case by WordPress to find all links to vimeo vidoes - added by users via the WP editing admin.

I would then like to pass control of these links to colorbox.

The jQuery selector works with this link:

http://vimeo.com/44799432

// vimeo in colorbox ##
jQuery("a").filter(function(){ // filter all as ##
    return jQuery(this).text().match(/vimeo\.com/igm); // match text with vimeo.com ##
    }).colorbox({iframe:true, innerWidth: "80%", innerHeight: "80%"}) // assign to colorbox ##
    .addClass("button vimeo"); // add class to style ##

However, vimeo pushes the content out of the iframe and reloads the page - so I need a regex that will match this url - that can be embedded via an iframe:

http://player.vimeo.com/video/44799432

match(/player.vimeo\.com/);

does not do it - any ideas?

NOTE: I'll obviously need a loop to check for multiple vimeo links...


Solution

  • Try this one (untested) >>

    jQuery("a").filter(function() {
        return jQuery(this).text().match(/vimeo\.com/igm);
      }).each(function() { 
        this.setAttribute("href", this.getAttribute("href")
        .replace(/^https?:\/\/(?:www\.|)vimeo\.com\/(\d+)$/i,
          "http://player.vimeo.com/video/$1")); 
      }).colorbox({iframe:true, innerWidth: "80%", innerHeight: "80%"})
      .addClass("button vimeo");