How to Play Video on Scroll with Elementor Magic Scroll Addon

Elementor Magic Scroll is a global addon in Premium Addons Pro for Elementor Page Builder plugin. It allows you to create sophisticated scroll animation and effects on your Elementor pages. Before we get into this article, we recommend checking the documentation article of Elementor Magic Scroll Addon to get to know more about this feature and the options included in it.

In this tutorial, we will walk through how to play self-hosted video on scroll using our Video Box widget with the Magic Scroll feature.

Play Self-hosted Video on Scroll using Magic Scroll addon


1. Use the Video Box Widget.

Go to your website page and from the Elementor editor, drag the Video Box widget and drop it into your desired section.

For this tutorial, we will mention the options that need to be changed to achieve the same effect.

  • Video Type: Choose “Self Hosted”.
  • AutoPlay & AutoPlay On Viewport: Set them to “Yes”.
Elementor Video Box Widget Setting - Content Tab
Elementor Video Box Widget Setting

2. Enable video play on scroll in Elementor Magic Scroll.

Jump to the widget’s Advanced tab, scroll down until you see Premium Magic Scroll, switch it on, then click on “Add Item”. From the “Select Animation ” dropdown list scroll down and choose “Play Video”.

Video Option in Elementor Magic Scroll Addon
Play Video Option in Elementor Magic Scroll Addon

Elementor Magic Scroll General Settings

  • How This Works: We can use “Lock Page Scroll Until Animation Ends” so the video keeps in the viewport till it ends before jumping to the next Elementor section. or we can use “Play Animation When Only Visible“.
  • Offset: If you chose “Play Animation When Only Visible” you can set screen offset in percentage (%).
  • Decrease Animation Speed By: From here, you can adjust how fast or slow the animation should behave/work. In our example, we kept it at “1.5”.
Elementor Magic Scroll Addon General Setting
Magic Scroll General Options

What if the video is jittering?

You may see the video glitching if it has a low number of frames, but don’t worry, we will walk through the solution to this.

We will use FFMPEG to increase the number of frames and fix the issue. So, make sure you have it installed on your device. Here’s a video tutorial showing how to install FFMPEG.

To fix the low frames issue open your terminal, navigate to the directory that contains the video file and use the command below. Here’s an article showing how to use terminal to navigate between directories.

ffmpeg -i input.mp4 -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output.mp4

Note: The ‘input.mp4’ should be the name of the video file.

This will produce a new video file ‘output.mp4’ with a larger number of frames. It should not have the glitching issue.

You Did It!

Now, you can set your videos to play on scroll with Magic Scroll. We’re looking forward to seeing what you will come up with and we encourage you to post your work in our Facebook Group and get others inspired.

Related Docs:

Leave a Reply

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.