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:
// 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...
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");