Pause or stop Vimeo video after closing modal custom code

Design help General
#1

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

#2

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://discourse.webflow.com/t/how-to-pause-and-stop-a-video-in-a-modal-on-close/2366/22

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

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

#3

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

#4

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 (Player SDK: Reference | Vimeo Developer) 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

How to make Vimeo video play on button click
#5

// First, visit the following Vimeo GitHub page to find the Vimeo Player API script to include on your page: https://github.com/vimeo/player.js/
// The code below will pause the video when the bootstrap modal is closed (Bootstrap 4 is what I used)
// Place the code below inside of a script tag
// Replace the id code ("#your-modal-id") in the code below, with the id of your bootstrap modal, the id is found on the most outer div of the modal code provided by bootstrap

(document).ready(function() { (’#your-modal-id’).on(‘hidden.bs.modal’, function () {
player.pause();
});
});