Magnific Popup & Vimeo – Force Close After Video Finishes


About The Author
Cabe Nolan is the founder of WP Cover where he shares his insight into WordPress, development, & entrepreneurship. Outside of WPCover, Cabe continues to run a successful WordPress development firm, Bold City Design as well as a few high profile websites, Arrivala, Two Way Resume, Dock Skipper, and a successful outdoors brand, DolfinPack.







Magnific Popup & Vimeo – Force Close After Video Finishes

A quick code snippet for everybody tonight involving Magnific Popup & Vimeo. A client recently requested the Magnific Popup window to automatically close after the video had ended and simultaneously a new popup to occur with a call to action for the visitor. While we’re not going to get into the second part in this tutorial, we will discuss how to make the Vimeo popup automatically close using the Vimeo player API and the Magnific Popup callbacks.

First, we need to include the Vimeo API script on our page. That is accomplished by loading the following script:

https://player.vimeo.com/api/player.js

Next, we’ll add the appropriate Magnific Popup javascript as well as the necessary callback.

jQuery('.popup-vimeo').magnificPopup({
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 160,
    preloader: false,
    fixedContentPos: true,
    callbacks: {
	    open: function() {
	      var iframe = jQuery('.mfp-content iframe');
		    var player = new Vimeo.Player(iframe);
		
		    player.on('ended', function() {
		        jQuery.magnificPopup.close();
		    });
	    }
	}
});

And that’s all there is to it! Enjoy this and put it to use in your development & marketing projects.


Share Your Thoughts

Leave a Reply

Your email address will not be published.


Related Stuff You Might Like







WordPress News, Tips, & Code Snippets

Join the WP Cover mailing list and get wordpress news, tips, code snippets, security warnings, and more delivered right to your inbox.  We won't flood your inbox, newsletters typically go out every 1-2 weeks unless it involves an important security release.

You have Successfully Subscribed!