How to Play Video on Scroll with Elementor Magic Scroll Addon

Adding interactive animations to your site can greatly improve user engagement and the browsing experience. Elementor Magic Scroll Addon from Premium Addons Pro helps you to create sophisticated animations on your website.

This feature enables sophisticated scroll-based animations, making your content more dynamic and visually appealing. 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 Elementor Magic Scroll feature.

What is Elementor Magic Scroll?

Elementor Magic Scroll is a Global Addon in Premium Addons Pro for Elementor Page Builder plugin. It allows you to create advanced scroll animations and effects on your Elementor pages, helping to build an immersive and engaging website experience.

Before diving into this tutorial, we recommend checking out the Magic Scroll Addon documentation to understand its full capabilities and included options.

Usability and Benefits of Magic Scroll

Elementor Magic Scroll Addon provides various functionalities that enhance your site’s user experience:

1. Play Videos on Scroll – Users can engage with self-hosted videos that play automatically when they scroll to a specific section.
2. Smooth Scroll Animations – Apply effects like translation, rotation, scaling, skewing, fade-ins, and fade-outs to any Elementor element.
3. Interactive Storytelling – Use Magic Scroll to create an immersive narrative experience, guiding users through engaging animations as they scroll.
4. CSS Property Animations – Modify opacity, borders, padding, and CSS filters (blur, grayscale, brightness, etc.) dynamically.
5. Enhancing Elementor Widgets – Magic Scroll seamlessly integrates with Elementor widgets like Video Box, Carousel, Progress Bar, Image Layers, and Image Comparison, ensuring a unified interactive experience.
6. Performance Optimization – Despite its advanced animation capabilities, Magic Scroll is optimized for speed and responsiveness, ensuring a smooth experience across all devices.
7. Customizable User Experience – Tailor animations based on scroll behavior, allowing for unique user interactions on different page sections.

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.

Step 1: Add Elementor Video Box Widget

1. Open Elementor editor and navigate to the desired page.
2. Drag and drop Elementor Video Box widget into the section where you want the video to appear.
3. In the Content tab, adjust the following settings:
   • Video Type: Select “Self Hosted”.
   • AutoPlay & AutoPlay On Viewport: Set both options to “Yes”.

Step 2: Enable Video Play on Scroll Using Magic Scroll

1. Switch to the Advanced tab of the Video Box widget.
2. Scroll down to locate Premium Magic Scroll section and toggle it on.
3. Click on “Add Item”, then select “Play Video” from the animation dropdown.
4. Adjust Elementor Magic Scroll Settings:
   • Lock Page Scroll Until Animation Ends – Keeps the video in the viewport until it finishes playing.
   • Play Animation When Only Visible – Plays the video only when it is in view.
   • Offset: Adjust the screen offset in percentage (%) for better control.
   • Decrease Animation Speed By: Set the animation speed (e.g., 1.5) for smooth playback.

Fixing Jittering Issues in Self-Hosted Videos

If the video appears jittery or glitches during playback, it may have a low frame rate. To fix this, you can use FFmpeg to increase the number of frames:

Steps to Increase Frame Rate Using FFmpeg:

1. Install FFmpeg on your computer.
2. Open your terminal and navigate to the directory containing the video file.
3. Run the following command:
   ffmpeg -i input.mp4 -vf "setpts=PTS/2,fps=60" -crf 20 -pix_fmt yuv420p output.mp4
   • input.mp4 – Replace with your original video file name.
   • setpts=PTS/2,fps=60 – Doubles the playback speed and sets the frame rate to 60 fps.
   • crf 20 – Ensures good video quality.
   • pix_fmt yuv420p – Ensures compatibility across various players.
   • output.mp4 – The name of the processed video file.

By following these steps, your video should play smoothly, creating a more professional and engaging experience.

Final Thoughts!

This guide helps you with using Elementor Magic Scroll from Premium Addons Pro to play a self-hosted video on scroll.

Ready to take your website to the next level? Get Premium Addons Pro and start implementing these amazing effects today!