jqt
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 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.

<script type="text/javascript">// <![CDATA[
$('#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.

Leave a comment...

16 comments

  1. Anthony says:

    Excellent piece of code. I’ve been looking for this answer. Thank you very much!

  2. Cary says:

    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();
    });
    });

  3. mog says:

    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

  4. Thanks for this code! I had to alter it slightly to my needs, but it worked like a charm!

  5. mog says:

    you changed my code …how could you do such a thing :P glad to have helped :)

  6. Matt says:

    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?

  7. mog says:

    A url please? …I imagine it is a CSS issue to do with where you have place the overlay in the document structure.

  8. CR says:

    Hi, thanks so much for this solution. It’s working perfectly. I ended up going with this:

    $(document).ready(function(){
    $(‘a#howdy’).click(function() {
    $(‘.modal-div’).prepend(”);
    modal.open({content: $(“#video_hold”)});
    $(‘.modal-close’).click(function() {
    $(‘#video_hold’).remove();
    });
    });
    });

    Looking forward to checking out the rest of the site!

    CR

  9. Sean says:

    Nice code. Do you have anything similar like this for flowplayer or jplayer html5 video loaded into jquery tools overlays as external iframe?

  10. mog says:

    Are you using wordpress, or is this by hand. To be honest i stopped using jQuery Tools as I found it a little annoying especially the lack of dynamic resizing in the overlays …is WP i use jQuery colorbox a lot, ..and have taken to using Vimeo Pro with privacy options for embedding client videos.

    That said, ..without WP/Vimeo, ..JWPlayer would be my first choice, ..and then I would use a manual installation of either colorbox or shadow box (probably colorbox – http://www.jacklmoore.com/colorbox ) which will allow you iframes, html et, ..and will not (I don’t think) give us the same problems jQuery tools did in terms of video continuing to play as the content is loaded and removed via jQuery rather than just hidden and shown as tools was doing.

  11. Sean says:

    I did the code by hand, not wordpress. Thanks a lot for the suggestion. It works well. You are the best.

  12. Sean says:

    Got another question. colorbox stopped the video when the overlays was closed. However, it doesn’t seem to like the autoplay comment from html5 video tag. It does not autostart to play when loaded into the overlays. Do you know how to resolve this? Thanks.

  13. mog says:

    Send me a url, .. because i hate autoplay personally, ..chances are depending on how you load the video it might start playing on page load ;) …but need to check.

  14. Sean says:

    I’m working on an internal server, no public URL.
    On the main file, I used the external file method on colorbox:
    $(“.ajax”).colorbox({rel:’ajax’, width:”80%”, height:”80%”});
    and on page, the link to trigger popup I wrote as such:

    Then on the video file itself, I used html5 video element:

    Hope this can help. Otherwise, I can send you the files if you tell me where to send it. Thanks.

  15. Sean says:

    somehow the video element code was stripped. it’s video tag with autoplay.

  16. mog says:

    hmm, ..interesting, ..is your internal server live online, or local? ..what version of PHP/Apache is it running, ..try the code of a ‘normal’ server setup. I am frantic busy today so you will have to play a bit more without me I’m afraid, ..but if you start to dent the wall with your head then send me the details to mog@mogmachine.com

This site is not up to date. I really should take it down and make a new one as I have been busy with a lot of cool projects and clients recently, but currently do not have the time to rebuild it.

So, it stays here, but please note it has not been updated in a while and if you need to get in contact with me please just email me directly at mog@mogmachine.com or phone me on +44 (0)7960 214407.

Thanks,

Marcus (mog)