Is there a way to prevent sound from continuing to play after exiting a video in a Webflow portfolio with Lightbox? If so, what code should I use and where should I place it? Thank you!
- Use custom JavaScript to reset the video source when a Lightbox closes in Webflow.
- Add the script in the Page Settings under the "Before </body> tag" section, save, and publish the site.
- Test the solution by ensuring videos stop when the Lightbox is closed.
Videos continuing to play sound after closing a Lightbox can be a common experience in Webflow. You can resolve this by ensuring the video stops or pauses when exiting the Lightbox. Here’s how to approach it:
1. Use Custom Code to Stop Videos
- Since Webflow does not provide built-in controls for this issue directly, you'll need to add some custom JavaScript.
- Custom code can detect when the Lightbox is closed and then stop or pause the video.
2. Add Custom Code in the Page Settings
- Go to Page Settings by selecting the page where the Lightbox component is placed.
- Scroll down to the Custom Code section.
- Add the following script inside the Before </body> tag area:
```javascript
<script>
document.addEventListener('DOMContentLoaded', function() {
var lightboxLinks = document.querySelectorAll('.w-lightbox');
lightboxLinks.forEach(function(link) {
link.onclick = function() {
setTimeout(function() {
var closeButton = document.querySelector('.w-lightbox-close');
closeButton.addEventListener('click', function() {
var iframe = document.querySelector('iframe');
if (iframe) {
var src = iframe.src;
iframe.src = src; // Reset the source to stop the video
}
});
}, 500);
}
});
});
</script>
```
- Save the settings and Publish your site to see the changes take effect.
3. Test the Solution
- Open your Webflow project and test the Lightbox to ensure that the video stops when you close it.
- If the sound persists, double-check the JavaScript placement and ensure you published the latest changes.
Summary
To stop a video noise after exiting a Lightbox in Webflow, utilize custom JavaScript to reset the video source upon closing the Lightbox. Insert the code in the Before </body> tag section of the Page Settings. Ensure to test the changes for effectiveness.
