How to add an attribute:

close icon
Hey! Give us some feedback here.
Functional

Auto Video

All videos on the page (Background Video components & <video> elements used in HTML Embeds) play and pause based on if the video is visible in the viewport.

3,812,672

loads per month

Auto Video
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script

No attributes needed.

Just add the script to the page and it works!

With the script in the <head> of your page, Webflow Background Video components and <video> elements play and pause based on if they are visible in the viewport.
Note:

Autoplay video does not work on iOS devices when “Low Power Mode” is enabled. Low Power Mode prevents autoplay by default on iOS devices.

Autoplay video does not work with Youtube and Vimeo videos. Their iFrames have CORS protection, we can't interact with them using JS.

Working examples

See this solution working live in this Webflow project.

Example
Video playing/pausing based on if it's visible in the viewport
Copy and paste this example directly on Webflow
locked icon
Coming soon

Frequently Asked Questions

Everything you need to know about this attributes solution.

No FAQ items found yet. Join Finsweet Community on Slack if you have any question related to this solution.

Developer documentation

external link icon

Next time implement inside Webflow

external link icon
Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.