If you want to create a video preloader on your website, this post will walk you through the complete process. Also, I showed you four different examples of how to create the preloader on a static HTML website, Divi, Elementor pro website, and how to exit the preloader dynamically with DOM (content) fully loaded.
I used the same technics with a slightly different approach depending on the CMS (WordPress), page builders, etc.
What is actually a preloader?
In simple words, a preloader is a content that is visible until the webpage finishes loading. And it disappears after the DOM (content) is loaded or after a certain time.
There are various types of preloaders you see on the web. It’s not mandatory to have one on your website but in some cases, it’s helpful especially if your website takes a long to load.
Sometimes certain web pages look distorted or broken until they finish loading. In this type of case, a preloader is helpful.
Also, some website owners like to show a preloader for a certain/exact amount of time.
In most cases, you’ll see preloaders with PNG, GIF, SVG, and a growing percentage of loading completion (something like a progress bar or circle). See an example (live preview) of a regular preloader. If you liked this live preview, see its setup guideline.
What is a video preloader?
A video preloader also works the same way as mentioned above but it shows a video instead of images (PNG/JPG), GIF, etc.
Video preloaders are rare on the internet and I personally have not found documentation or plugins to make one.
Recently (December 2022), came across a request where someone needed a video preloader in anyways or at any cost where he wants to display a video with a logo animation.
This is why I created it and shared it with others if it helps any of you.
Let’s get started!
How to create a video preloader?
There are various ways to create a video preloader and every developer will/may do it differently. Here I showed my preferred way in the video.
You may have to apply some tweaks based on the type of website you run. However, here I showed you a couple of different examples based on situations.
How to create a video preloader on a static HTML website?
In this project structure, you need three files that are mandatory: index.html, style.css & script.js and the rest of them are optional but good to have.
I also have a video file named “preloader.mp4”
As mentioned in the above video, add the following HTML markup after the opening body:
<div id="prelaoder">
<video autoplay muted>
<source src="./preloader.mp4" type="video/mp4">
Your browser does not support html video
</video>
</div>We want to make the video full screen no matter the screen size. So I have the following CSS that you should too:
#prelaoder {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}
#prelaoder video {
width: 100%;
height: 100;
object-fit: cover;
}
body.loaded #prelaoder {
display: none;
}The last line of the CSS has been written matching with JavaSript mentioned below. We are just adding a future CSS class name of “loaded” to the body.
We want the video preloader to disappear after 5000 milliseconds (5 seconds). In order to do that we need to add the “loaded” CSS class to the opening <body> after this timeframe. To accomplish this, here is my JavaSript:
setTimeout(function() {
let body = document.getElementsByTagName("body")[0]
body.classList.add("loaded")
}, 5000)That means we are only doing one thing using JavaScript which is adding a certain CSS class name to the opening <body> after 5 seconds.
That’s it!
Now if you refresh your static webpage, you will see that the video preloader is working and disappears after 5 seconds.
How to create the video preloader on a Divi website?
After you log in to your WordPress dashboard, navigate to “Divi – Theme Options” and under the “Integration” tab, copy & paste the following HTML code (as you see on the video).
<div id="prelaoder">
<video autoplay muted>
<source src="https://absolute-path-to-the-video.mp4" type="video/mp4">
Your browser does not support html video
</video>
</div>Make sure you replaced the video link with your own video (absolute path).
Next, copy-paste the following CSS to your theme customizer (Divi – Theme customizer – Custom CSS). Don’t forget to save/publish the latest CSS.
#prelaoder {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
z-index: 9999999;
}
#prelaoder video {
width: 100%;
height: 100;
object-fit: cover;
}
body.loaded #prelaoder {
display: none;
}This is the exact CSS as the static site example with a higher z-index to the “#preloader” and that’s it.
Next/finally, on the same “Integration tab” (Divi), paste the following JavaScript (by wrapping in <script> tag as you see below).
<script>
setTimeout(function() {
let body = document.getElementsByTagName("body")[0]
body.classList.add("loaded")
}, 5000)
</script>It’s actually, JS but wrapped within <script> tag and that’s why you see the file type of “HTML.” Anyways, you’re done with it.
Go to your Divi site and refresh the page. Now you will see the video preloader is working on your Divi website.
How to create the video preloader on the Elementor pro website?
You can do it on a free Elementor website as well but in this example, I showed you how to do it on an Elementor premium website.
Navigate to “Elementor – Custom Code” create a code block and paste the exact code that you see on the above Divi HTML. Don’t forget to replace the video link with yours.
Make sure the location is set to “<body> – Start” and publish your code.
Next, follow the same process and create another code block. Copy-paste the exact code from the above Divi script & hit publish.
Next/finally, navigate to “Appearance – Customize – Additional CSS” and copy-paste the exact CSS from the above Divi CSS.
How to dynamically close the video preloader?
Sometimes you may need to close the preloader dynamically after the DOM (content) has finished loading. In this type of case, we can’t use the “setTimeout” method. Instead, we need to calculate the time dynamically.
There are different ways to handle this situation, and in my opinion, the “DOMContentLoaded” event is the perfect & easiest solution.
This event fires a function after the DOM finishes loading. So, instead of setting a static time and the “setTImeout” method, wrap the previous two lines of JavaScript within “DOMContentLoaded” event. If it’s not yet clear to you, then copy-paste the following code (in order to dynamically handle the time to exit the preloader):
document.addEventListener("DOMContentLoaded", function() {
let body = document.getElementsByTagName("body")[0]
body.classList.add("loaded")
})| Learn & practice CSS with real-world examples |
|---|
| Learn basic CSS from the ground up. |
| Build real projects in HTML CSS. |
Build HTML CSS projects
Conclusion
References that I mentioned in this post (and video)
I tried to make this process of creating a video preloader as simple as possible and explained the code. Therefore it’s not working on your project or if you find it difficult, feel free to reach out. I will try to help each and everyone as much as possible.
