Streaming live at 10am (PST)

Pause or stop Vimeo video after closing modal custom code

Hello, on my website I have a portfolio of videos using Lightbox. When you open a video and play it, if you exit the video the sound continues playing. Is there a way around this or a way to fix it? If this requires custom coding please let me know what code to use and where to put it. Thank you in advance!

Matt


Here is my site Read-Only: https://preview.webflow.com/preview/silvertiefilms?utm_source=silvertiefilms&preview=cb81b8a7ab5c63fea2c894617244f24b

You should add stop -or- reset method (Javascript). Lightbox is only a trick of hide/show some overlay content (This is not stooping your video).

“How to” - its more a task for freelancer - you should know a little JS to solve this:

(You find examples of “how to stop 1video” on click on button X - in your case is a list of videos).

Related (I think you wont find copy-paste answer under this Q - but this is good start):

https://forum.webflow.com/t/how-to-pause-and-stop-a-video-in-a-modal-on-close/2366/22

https://forum.webflow.com/search?q=stop%20video%20modal

Change the subject of your Q to “custom code”.

@bartekkustra are you still active and could help me with this? I saw you answered a similar question years ago.

Hey @swartzenmedia!

(Note: I’m @bartekkustra - I created new account a while back)
There are two ways you can approach this:

Option 1

Instead of using custom lightbox you can use Webflow Lightbox. I noticed you’re using Collection List there to display those, so feel free to check the community-made Dynamic Lightbox Code:

That way if you close the lightbox the video will just stop :slight_smile:

Option 2

The other way is - instead of using VIDEO field in Collection and VIDEO widget in Webflow - to build custom VIMEO player inside of your custom modal. There are great docs on that here:

https://developer.vimeo.com/player/sdk/basics

Having that done you can then access the Vimeo Player SDK methods (https://developer.vimeo.com/player/sdk/reference#about-player-methods) that will allow you to play/pause the video. You’ll be able to call those by simply attaching a custom code to the closing icon of your custom modal, eg:

$('#close-btn').click(function() {
 // https://developer.vimeo.com/player/sdk/reference#pause-a-video
  player.pause();
});

Hope this helps! :slight_smile:
Cheers,
Bart