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://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â.
@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:
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 
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 (Vimeo) 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!
Cheers,
Bart
// First, visit the following Vimeo GitHub page to find the Vimeo Player API script to include on your page: GitHub - vimeo/player.js: Interact with and control an embedded Vimeo Player.
// 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();
});
});
A bit late to the party, but in case somebody else is looking for another optionâŚ
First, some context. WF uses embed.ly to embed videos when using a video element. Hereâs the documentation.
With this in mind, you can use some JS to target the video element and traverse outwards to target the correct elements.
In my case, I had the following HTML structure
<button class="modal-open-button">Watch Video</button>
<div class="modal-overlay">
<div class="video-player-wrapper">
<img src="icon.svg" class="modal-close-button">
<div class="video-player w-video w-embed"> <!-- this is the WF video element -->
<!-- WF loads an iframe element here... -->
</div>
</div>
</div>
So, this is the JS I came up with to control the video player with the custom modal triggers I have:
// First, load the Embed.ly Library
(function(w, d){
var id='embedly-platform', n = 'script';
if (!d.getElementById(id)){
w.embedly = w.embedly || function() {(w.embedly.q = w.embedly.q || []).push(arguments);};
var e = d.createElement(n); e.id = id; e.async=1;
e.src = ('https:' === document.location.protocol ? 'https' : 'http') + '://cdn.embedly.com/widgets/platform.js';
var s = d.getElementsByTagName(n)[0];
s.parentNode.insertBefore(e, s);
}
})(window, document);
// This controls the videos in modals
embedly('player', function(player){
const videoPlayer = player.frame.elem;
const videoModalOpenButton = videoPlayer.parentElement.parentElement.parentElement.previousElementSibling;
const videoModalOverlay = videoPlayer.parentElement.parentElement.parentElement;
const videoModalCloseButton =videoPlayer.parentElement.previousElementSibling;
const openVideoModalActions = () => {
player.play();
// You can add more action here ...
};
const closeVideoModalActions = () => {
player.pause();
// You can add more action here ...
};
videoModalOpenButton.addEventListener('click', openVideoModalActions, false);
videoModalOverlay.addEventListener('click', closeVideoModalActions, false);
videoModalCloseButton.addEventListener('click', closeVideoModalActions, false);
});
I know the traversing might look silly, but this way, you donât have to use any querySelectors and keep it more flexibleâespecially when you have multiple videos/modals on the same page.
Hope this helps someone out there!
Note 1: In the case of the videoModalOpenButton var, this is equal to iframe > .video-player > .video-player-wrapper > .modal-overlay > .modal-open-button. Again, the point is to traverse inside-outâfrom the player loaded in the iframe to the elements above.
Note 2: Depending on your HTML structure, you might need to update the script to target the correct elements. Just play around with parentElement and previousElementSibling or nextElementSibling
Am I correct to assume that something recently broke embedlyâs ability to play vimeoâs videos with player.play();? Even their docs page you have referenced wouldnât play the videos for me. But it will play them if I manually started and paused the videos at least once.
edit: the method still works in Firefox but not in Chrome.