Elementor Premium Video Preloader

Elementor Premium Video Preloader

Check out our CSS Course, made especially for Elementor users.

Table of Contents

In this tutorial you are going to learn how to add a video preloader to your website.

There are some advantages to using a video as a preloader, first and foremost of which is that you have complete design freedom, and can create something that will look amazing.

The inconvenient is that video files are large, so you will need to be very careful with this. Keep the video as short as possible, and compress it very well.

Another thing to consider is that on mobile, videos won't autoplay reliably. Don't worry though, I coded in a way to detect if the video is able to play, and if not, it will show your fallback SVG or GIF.

See it here: (click the little reload icon on the top right)

Visit the demo page directly.


  • Have the video of your choice be a preloader
  • Have a GIF or SVG instead when video playback fails on mobile
  • Plays when the browser has focus (the animation won't play out if opened in a background tab, for example)
  • Play only once per visit (optional)
  • Remove the scroll bar while the video is playing for better immersion (optional)
  • Customizable exit animation (in the demo, it's a clip path going up)

Let's get started!

First, add this code to your project

This is a premium tutorial. Purchase access to unlock the full tutorial.


Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right here:

Checkout the Elementor Addon Finder directly


Leave a Reply