Pause Videos when Hidden

So you have some Webflow video elements on your page and they're playing happily.

But sometimes, the user will do something where you want the video to automatically pause, e.g.;

• If they close the lightbox or overlay that the video appears in
• If they scroll the video off-screen

Webflow’s video element uses Embedly, which uses Player.js - so you can accomplish this by detecting the "pause trigger event," and then pause the videos using Player.js.

Example Code

IMPORTANT: I wrote this code specifically for an element arrangement and interactions-based overlay approach described in Olly Fawcett's forum post here.

The same process will work for any Webflow Video element, however;

• It's only been tested with Vimeo-sourced video
• It has not been tested with Webflow's YouTube element, only with the more generic Video element
• You'll need to adjust the selectors in the code below for your own element structure and trigger. This code is designed to trigger on an interactions-based overlay being hidden.

‍