Video Control
Animate playback of background videos with native Webflow interactions.
Snippet
Copy the <script> and paste it in the <head> tag or before </body>
<!-- Snippets by The Lazy God • Video Control -->
<script defer src="https://cdn.jsdelivr.net/gh/the-lazy-god/[email protected]/tlg-video-control.min.js"></script>Setup
Required setup
- Add the attribute to the videos
- Create CSSÂ variables for each unique video control
- Create your native Webflow interaction
1: Add the attribute to background video elements
Any background video element you want to control needs the attribute below added. You can use the the number as an identifier when using multiple videos on the same page.
Note: Make sure the videos are not set to autoplay.
2: Create a variable for each video
Create a variable of type size for each video. This will be used to control the progress of the video.
3: Create native Webflow interactions
Create any Webflow interaction where you animate the variables you created above. The value of the variable going from 0 to 100 will correspond to video progress going from 0 to 100% completion.
Optional add-ons
- Set maximum frames per second for each video
Set frames per second for each background video
Add this to the background video elements to set the maximum fps for the playback of that video. This doesn’t affect playback speed.
Default is 30 FPS.
Note: 30 fps seems to be the sweet spot for performance. Setting fps higher than 30 can result in choppy playback in Chrome.