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!
- Add custom JavaScript to reset the iframe's source in the page settings of your Webflow project to stop video playback when the Lightbox is closed.
- Save changes, publish your site, and test the Lightbox functionality across different browsers and devices to ensure it works.
Exiting a video in a Webflow portfolio might not automatically stop the sound if the video continues to play in the background. To address this, you can utilize custom JavaScript to stop the video when the Lightbox is closed.
1. Add Custom Code to Stop Video Playback
- Open Your Webflow Project: Navigate to your project dashboard and select the project where you want to stop the video playback.
- Go to Page Settings: Find the page that contains the Lightbox with the video and open its settings.
- Add Custom Code Before </body> Tag:
- Use the following JavaScript to stop the video when the Lightbox is closed:
```javascript
<script>
document.addEventListener('DOMContentLoaded', function() {
const lightboxes = document.querySelectorAll('.w-lightbox');
lightboxes.forEach(lightbox => {
lightbox.addEventListener('hidden', function() {
const iframes = lightbox.querySelectorAll('iframe');
iframes.forEach(iframe => {
const src = iframe.src;
iframe.src = src; // This effectively stops the video
});
});
});
});
</script>
```
- Save and Publish: Make sure to save the changes and publish the site to see the effect.
2. Test Across Browsers and Devices
- Preview and Test: Open your published site and test the Lightbox to ensure the video stops playing when closed.
- Check Multiple Devices: Ensure the functionality works consistently across desktop and mobile devices.
Summary
To prevent videos from continuously playing after closing a Lightbox in Webflow, add custom JavaScript that resets the iframe's source. Implement this by placing the script in the page settings under the custom code section before the </body> tag. Remember to thoroughly test this solution across different devices.
