Video Control [v2]

Animate playback of background videos with native Webflow interactions.

Built for Webflow

🔗 Snippet 📝 Setup

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/tlg-video-control@v2.0.0/tlg-video-control.min.js"></script>

Copy snippet

Setup

Create CSS variables for each unique video control
Add the attribute to the videos
Create your native Webflow interaction

1: 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.

‍Number is the recommended type, but size also works — the script only reads the numeric value, so the unit (if any) is ignored.

Variable

Name

video-control-1

Use any name you want.

Copy

Value

Initialize this value to 0

2: Add the attribute to background video elements

Any background video element or custom <video> element you want to control needs the attribute below added.

The value should be the actual CSS name of the variable you created. Copy it from the variables panel to make sure you get it right. It should look something like --video-control-1 or var(--video-control-1).

Remember to get the full variable name if you are using a collection.

Note: Make sure the videos are not set to autoplay.

Attribute

Name

tlg-video-control

Copy

Value

var(--video-control-1)

You can write it with or without the var()

Copy

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.

Tip

Optimize seeking with a lower GOP

Scrubbing works by setting the video's currentTime, which makes the browser seek. To seek, the browser jumps to the nearest keyframe (I-frame) and then decodes every frame forward until it reaches the target. The spacing between keyframes is the video's GOP (Group of Pictures, i.e. the keyframe interval).

Most videos are encoded with a large GOP (few keyframes) to save file size — great for normal playback, but it makes scrubbing slow and janky, because each tiny step can force the browser to decode many frames to land on the right one.

Lowering the GOP adds more keyframes, so every seek lands close to one — making scrubbing much smoother. A GOP of 1 (every frame is a keyframe) gives the best possible scrubbing performance, at the cost of a larger file. A GOP of 5 or 10 brings the file size back down while still giving fine results, so tune to taste.

Firefox seems to struggle the most with scrubbing, but it gets good with a low GOP — so if you're seeing jank there, that's the first thing to try.

You can re-encode a video with a lower GOP locally with FFMPEG, or use my in-browser microtool: Keyframes.