Using Video in Webflow

Pause Videos when Hidden

Overview
Video Hosting Options
101
Webflow-Native Video Sources
Video Sources & URLs
401
Responsive Video
402
YouTube | How to Embed YouTube Shorts
2:40
403
YouTube | How to Start Playback at a Specific Point
3:18
404
Suppressing YouTube Related Videos
405
Transparent Videos
406
Pause Videos when Hidden
408
Customizing Video Players
408
Other Video Sources
Hosting Video on Google Drive
501
No items found.
Published
July 9, 2023
Updated
in lightbox

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.


Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.