Recently I had to troubleshoot why embedded Vimeo videos appear but
can't be clicked on when loaded on an element handled via
Isotope.
It turns out that this issue is specific to Firefox 9.0.1 on Mac. Not
sure if it affects other browsers though.
Assuming that the Isotope controlled element loads the embedded Vimeo video
once it gets clicked, then the solution was to remove the '-moz-transform'
css from said element preferably at the end the function bound to its 'click' event.
An example is shown below. Here, the elements handled by Isotope are
those with class 'thumbnail'. The code utilizes the excellent
jQuery based plugin for detecting browsers and OS by Stoimen.
jQuery('.thumbnail').click(function(){
// // Code to load content with embedded Vimeo video into this element.
// // This could be done via Ajax.
// // Workaround to make Vimeo working in FF (Mac)
if ((jQuery.client.os == 'Mac') && (jQuery.client.browser == 'Firefox')) {
jQuery(this).css('-moz-transform', '');
}
});
Hope this helps someone out there. Took me an obscene 2 days of work to troubleshoot this one :(
