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.
Requirements:
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that Elementor Magic Scroll feature and Video Box widget are enabled so you can find them in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
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”.
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”.
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”.
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.mp4Note: 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.
