Magnific Popup & Vimeo – Force Close After Video Finishes

Apr 14, 2019

Magnific Popup & Vimeo – Force Close After Video Finishes


This post was originally created on our sister site WP Cover.
View Original Article
April 14, 2019

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.

The post Magnific Popup & Vimeo – Force Close After Video Finishes appeared first on WP Cover.

Additional News

Perfect!

Let's get started. Fill out the form below to email us or request a call back.


FREE: 10 Step Guide To Choosing A Web Design Company

FREE: 10 Step Guide To Choosing A Web Design Company

Download your free e-book. Learn the questions you should be asking prior to partnering with a web design company. Enter your email address and we'll send it to you right away!

We've sent the e-book to your email address!