Stop Modal Video on Close

This site has a lightbox with a video popup from Vimeo. I’m having trouble finding any documentation on stopping the video upon closing the modal. Everything I’ve read on these forums has been applicable to Youtube, not Vimeo. The public link for my site is: https://preview.webflow.com/preview/serenityhairsalon?preview=a3e1e16745fe02aaf87780049cc25961

The link to the lightbox is under class “Video Link,” the video has class and ID “Video,” and the modal has class “Video Player.” This is the code I currently have for the popup:

<script type="text/javascript">
$(document).ready(function() {
  $('.video-link').click(function() {
    $('.modal-background').fadeIn();
    $('.video-player').fadeIn();
  });
  $('.close-modal').click(function() {
    $('.modal-background').fadeOut();
    $('.video-player').fadeOut();
 });
  $('.modal-background').click(function() {
    $('.modal-background').fadeOut();
    $('.video-player').fadeOut();
});
});
</script>
1 Like

Hi @jordanshotwell, if you are using a custom modal window instead of a Webflow lightbox for the vimeo video, then you will need to use the Vimeo Javascript API to control your videos:

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

There on the Vimeo API page, are the javascript functions that can be used to start, stop or pause your video.

Cheers,
Dave :slight_smile:

Hey @cyberdave. I probably explained myself poorly. I’m using the Webflow lightbox widget, and set the thumbnail to a custom class. With that in mind, I need the video to pause and stop on close.

Hi @jordanshotwell, thanks for the update. I took a look at the site, and it seems you are using a custom modal window with the video widget, not the lightbox. If you use the Lightbox Widget with the video, then the video will close/stop when the lightbox is closed.

If you want to use a custom modal as you are doing now, then you will need to use the Vimeo javascript API to load and control the video.

If you do have a lightbox on the site, then I am missing it on your page :wink: if it exists, could you let me know the exact location?

​I hope this helps :slight_smile:

2 Likes

Thanks @cyberdave, that worked perfectly. The lightbox works much better than a custom modal in this case!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.