Scrollzee – Scroll Video WordPress Plugin
Scrollzee is a free scroll video wordpress plugin that ties video playback to scroll position instead of a timer. Scroll down and the video plays forward, frame by frame. Scroll up and it plays backward. There is no autoplay, no play button, and no waiting. The visitor’s mouse wheel or finger becomes the playback control.
This is the same effect you have seen on Apple product pages, high end portfolios, and modern SaaS landing pages. Until now, getting this on a WordPress site usually meant hiring a developer or paying for a premium plugin. Scrollzee brings it to the free plugin directory, built for creators who want that cinematic scroll effect without touching custom code.
How Scroll Controlled Video Actually Works
A normal video plays on a timeline. You hit play, it runs from second 0 to second 10, and it stops. Scrollzee removes the timeline completely. Instead, it maps your scroll position to a specific frame in the video.
Scroll 10% down the video section, and you see the frame that sits at 10% of the video. Scroll 50% down, and you land on the frame at the halfway point. Scroll back up, and the frames play in reverse. The effect only moves when the visitor moves, which is what makes it feel smooth and intentional rather than like a random background video loop.
Scrollzee gives you two ways to achieve this, and picking the right one matters for how smooth the final effect looks.
01
Image Frame Sequence Mode (Recommended)
This is the image sequence scroll video method, and it extracts your video into individual still images, one image per frame, right inside your browser. No server side ffmpeg setup, no command line, no extra software. Once extracted, the frames upload straight to your Media Library, and Scrollzee swaps between them as the visitor scrolls.
Because there is no video file being decoded while scrolling, this mode gives the smoothest possible result. This is also the closest match to how sites like Apple actually build their scroll animations. If your Scrollzee frames ever need regenerating, the plugin automatically cleans up the old set so your Media Library does not fill up with unused images.
02
Video Seek Mode
This mode is quicker to set up since there is no extraction step. It relies on direct video scrubbing on wordpress, meaning Scrollzee sets the video’s current playback time based on scroll position. It works well for shorter clips and quick projects.
The trade off is that Video Seek mode depends on your video’s keyframe interval. If scrolling feels choppy, re-encode the source video so every frame is a keyframe:
ffmpeg -i input.mp4 -vcodec libx264 -crf 18 -g 1 -pix_fmt yuv420p output.mp4
If you would rather skip this step entirely, switch to Frame Sequence mode, which does not have this limitation.
Features That Make Scrollzee Different
Scrollzee was built to be a proper video scroll animation wordpress solution, not a stripped down demo. Here is what comes included in the free version:
- Two playback modes: Image Frame Sequence or Video Seek, pick whichever fits your project
- One click frame extraction that runs in your browser and uploads straight to the Media Library
- In-admin scrub preview, so you can test the scroll feel without leaving wp-admin
- Adjustable frame image quality and compression
- Adjustable smoothing and scroll distance, so you control how fast or slow the video reacts
- Optional sticky pinning while the video scrubs
- Cover or contain fit, with poster image support
- Player Height setting: go full screen, or match the video’s own aspect ratio to avoid cropping
- Separate Phone Height override, so mobile visitors do not get the same crop as a full screen desktop hero
- Automatic mobile optimization with a shorter scroll track and tighter tracking on phones
- Respects prefers-reduced-motion, showing a static frame instead of animating for visitors who need it
- Native Gutenberg block, a native Elementor widget, and a plain shortcode: scrollzee_video id=”123″
- No jQuery or GSAP dependency on the frontend, built on lightweight vanilla JS
- Assets only load on pages that actually use the block, so the rest of your site stays fast
Where to Use a Scroll Video on Your Site
An apple style scroll video works best when it has a job to do, not just as decoration. A few places it fits naturally:
- Product pages, to walk a visitor through a product from every angle as they scroll
- Portfolio and case study pages, to show a project unfolding step by step
- Landing page heroes, to hold attention in the first few seconds instead of a static image
- Tutorial or explainer sections, where you want a process to feel connected to reading progress
- About or story pages, to give a scroll driven narrative a bit more polish than plain text and images
Because Scrollzee only loads its assets on pages where the block is present, adding it to one section of your site will not slow down the rest.
How to Add Scroll Video in WordPress with Scrollzee
Setting up your first scroll video takes a few minutes.
- Install and activate Scrollzee from the WordPress plugin directory, or upload the zip through Plugins > Add New > Upload Plugin.
- Go to Scroll Videos > Add New in your admin sidebar.
- Upload your source video file.
- Choose Image Frame Sequence mode and generate the frames, or choose Video Seek mode if you want a faster setup.
- Adjust your scroll distance, smoothing, player height, and phone height settings, then use the in-admin scrub preview to check the feel.
- Publish, then insert it anywhere using the Scrollzee block, the Elementor widget, or the shortcode shown in the sidebar.
Frequently Asked Questions
Can I use a YouTube or Vimeo URL with Scrollzee?
No. Both playback modes need direct access to the actual video file. Embedded platform players like YouTube or Vimeo do not allow frame level access or precise seeking, which is what scroll controlled video depends on. Download the file first, then upload it directly into your WordPress Media Library.
Why is Video Seek mode stuttering on my site?
This almost always comes down to the video's keyframe interval. Re-encode your file with the ffmpeg command shown above using -g 1, or switch to Frame Sequence mode instead, which does not run into this issue at all.
Can I use more than one scroll video on the same page?
Yes. Every Scroll Video entry has its own shortcode, its own block instance, and its own independent settings, so you can place several on one page without them affecting each other.
My video looks cropped on phones. How do I fix that?
Try the Phone Height setting, which lets you set a specific height in vh used only on phone sized screens. You can also switch Player Height to "Match video aspect ratio." A landscape video forced into a tall, full screen phone box has to crop hard to fill the space, either fix gives it a shorter, more natural height instead.
Does Scrollzee slow down my website?
No. Scrollzee has no jQuery or GSAP dependency, runs on lightweight vanilla JavaScript, and only loads its scripts and styles on pages where the block, widget, or shortcode is actually used.
Is Scrollzee compatible with Elementor?
Yes. Scrollzee includes a native Elementor widget alongside the Gutenberg block and shortcode, so you can drop it into an Elementor layout directly without extra setup.
Download Scrollzee – Scroll Video - Free WordPress Plugin
Scrollzee free WordPress Plugin is 100% free and open source. Download it directly from the official WordPress Plugin Directory.
