Is it possible to play a video in Webflow when a user scrolls and the video is in view?
TL;DR
- Embed an HTML5 video using a custom
- Assign a unique ID or class to the wrapper element for targeting.
- Set up an “Element is in view” interaction in Webflow to run JavaScript that plays the video when in view and pauses it when out.
Yes, you can play a video in Webflow when it comes into view on scroll using Webflow's native interactions and animation triggers.
1. Use a Video Element with Custom Embed
- The standard Webflow Video element does not give you full control over play/pause behavior.
- Instead, use the Embed element and add a standard HTML5
<video>tag with controls removed and autoplay disabled. - Example:
<video id="scrollVideo" preload="auto" muted playsinline width="100%"> <source src="your-video.mp4" type="video/mp4"> </video>
2. Assign an Element ID or Class
- Give your Embed element (or the parent Div) a unique class or ID — e.g.,
scrollVideoWrapper. - This makes it easier to target in interactions.
3. Add an Intersection-Based Interaction
- Go to the Interactions panel (lightning bolt icon).
- Choose Element trigger > While element is in view.
- Set the trigger on the wrapper element (
scrollVideoWrapper). - In the interaction steps:
- Add a Start Action → Custom Code (via Webflow Action: Run JavaScript).
- Example inline script:
document.getElementById('scrollVideo').play(); - Add a When out of view action → Run JavaScript:
document.getElementById('scrollVideo').pause();
4. Mute the Video for Autoplay
- Browsers block autoplay with sound. To allow autoplay when video scrolls into view, ensure the video is:
- Muted
- Has the attribute playsinline
- Is not set to autoplay initially
5. Hosting the Video
- For HTML5
<video>tags, make sure the video is hosted externally (like AWS S3, Bunny.net, or a reliable CDN), or uploaded to Webflow’s Asset panel and linked via its file URL.
Summary
To autoplay a video in Webflow on scroll, use a custom embed with an HTML5 video and trigger playback using “Element is in view” interactions, paired with custom JavaScript to play or pause the video. This gives full scroll-based playback control while adhering to browser autoplay restrictions.