jQuery Tools: Stop Vimeo playing on overlay close
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 href="#" rel="#overlay-<?php the_ID(); ?>" id="overlaylink-<?php the_ID(); ?>" > video link </a> <div class="simple_overlay" id="overlay-<?php the_ID(); ?>"></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.
<script type="text/javascript"> $('#overlaylink-<?php the_ID(); ?>').click(function() { $('#overlay-<?php the_ID(); ?>').prepend('<div id="video_hold"><?=$vimeo_iframe_code?></div>'); }); $(document).ready(function() { $("#thumbs a[rel]").overlay( { mask: { color: '#000000', loadSpeed: 200, opacity:1 }, onClose: function() { $('#video_hold').remove(); } }); }); $(document).ready(function() { $('#overlay-<?php the_ID(); ?> a.close').click(function() { $('#video_hold').remove(); }); }); </script>
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.
Comments
Excellent piece of code. I’ve been looking for this answer. Thank you very much!
Hi Mog,
I created a portfolio page on my wordpress site with multiple overlays containing vimeo videos and I’ve tried implementing your above code, but can’t get it to work. I’m using textmate and the code color of .prepend is not the same as .click, I’m not sure what that means. Do you have any suggestions to get the video to stop playing after I close out of the overlay? Thanks for your help!
Anyway, here is a snippet of my code
<?php
$numProjects = count($motion);
$numGalleries = ceil($numProjects/4);
$k = 0;
$remainder = $numGalleries*4 – $numProjects;
for ($i = 0; $i
<?php for ($j = 1; $j
ID, “vimeo”, true); ?>
<?php echo "ID, “project_thumb”, true) . “‘ rel=’#overlay_”. $foo_motion .”‘ class=’item-pic’ id=’overlaylink_”. $foo_motion .”‘ />” ; ?>
<div class="simple_overlay" id="overlay_”>
$(‘#overlaylink_’).click(function() {
$(‘#overlay_’).prepend(”);
});
$(document).ready(function() {
$(“img[rel]“).overlay({
onClose: function() {
$(‘#video_hold’).remove();
}
});
});
$(document).ready(function() {
$(‘#overlay_ a.close’).click(function() {
$(‘#video_hold’).remove();
});
});
Hi Cary,
Can you send me a zipped version of your file to mog@mogmachine.com and also a link to the page it is on as once I have finished converting the nicely formatting rich text wordpress version of your comment code, ..I think I have created more problems than you had to start with ;)
Thanks
Thanks for this code! I had to alter it slightly to my needs, but it worked like a charm!
you changed my code …how could you do such a thing :P glad to have helped :)
I got this to work (on a standalone page), but for some reason the overlay doesn’t load in the center of the window. If I click the trigger once, it is left aligned, if I close it and click it again, it’s centered. Any reason why it’s doing that, or how to fix it?
A url please? …I imagine it is a CSS issue to do with where you have place the overlay in the document structure.