This is a solution I posted in a forum recently after I was looking for help and no one seemed to have the answer.
The problem is using the jQuery Tools library, specifically the ‘overlay’ functionality to load in Vimeo players onto an overlay. When the user closes the overlay the video keeps playing. Additionally to load multiple players on a single page one must load in all payers at page load which is resource heavy.
So, the solution is to only add the Vimeo code when the overlay link is clicked, and then remove it as soon as the overlay is closed.
This example is using WordPress but has been commented as such that it should be easy to adapt to a stand alone page or other CMS.
I assume you already have jQuery and the jQuery Tools library loaded into your page.
First things first, the HTML:
You will notice I use the_ID a lot, this is because I have multiple overlays on the page and it is important to be able to address them individually.
You will notice no vimeo code in the overlay div.
<a id="overlaylink-<?php the_ID(); ?>" href="#" rel="#overlay-<?php the_ID(); ?>"> video link </a> <div id="overlay-<?php the_ID(); ?>" class="simple_overlay"></div>
Now the JS, ..
When you click on the link is ‘prepends’ the overlay code in a div ‘video_hold’ (you need this div to be able to easily remove it afterwards).
My Vimeo code is contained in the variable $vimeo_iframe_code.
Then you insert your normal overlay code in a doc.ready.
then afterwards you utilise the onClose action to initiate a function that removes the video_hold div you had inserted with your Vimeo code. You also need to repeat the same action for the .close button as for some reason pressing the actual close button does not seem to trigger the onClose action for reasons beyond me.
It is worth noting that if like me you have multiple instances of this on a single page and you are using WP, then this code will need to be part The Loop so it is created for each instance.