Question

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…

Thanks!

Answer 1

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");