Share review
Need help? Join Finsweet+ and get expert support!
Thank you for sharing your feedback with us!
Oops! Something went wrong while submitting the form.
AttRibutes
AUTO VIDEO
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

Auto Video

Autoplay and pause videos in Webflow based on visibility in the viewport

Watch a quick tutorial
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-autovideo
></script>

Copy Script
4

Publish your project and check out the result on the live site.

* Attributes Solutions must be tested on the published site after each change. They do not run in Design, Edit, or Preview mode.

No attributes required. Simply add the script to your page and it functions!

NOTE

By placing the script in the <head> of your page, Webflow Background Video components and <video> elements automatically play and pause depending on their visibility in the viewport.

IMPORTANT

Auto Video does not work on iOS devices when Low Power Mode is enabled. Low Power Mode prevents autoplay by default on iOS devices.

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

EXAMPLE

Here is an example of video embed code that you can copy and paste to use in your project:

 <video controls loop muted width="100%">
  <source
    src="https://dl.dropboxusercontent.com/s/hegfeny3sclaar5xt660t/A-new-era-of-no-code.webm?rlkey=2p6bwrsdqq9dj9pw3drqf1qfv&dl=0"
    type="video/webm"/>

  <source
    src="https://dl.dropboxusercontent.com/s/hegfeny3sclaar5xt660t/A-new-era-of-no-code.mp4?rlkey=2p6bwrsdqq9dj9pw3drqf1qfv&dl=0"
    type="video/mp4"/>

  Sorry, your browser doesn't support embedded videos.
</video>
Copy code

Still need help?

Get Support