Table of Contents
In this tutorial, I will show you how you can set a different Elementor background video for mobile users.
For ideal performance, we would prefer to avoid loading a large video file for these mobile users. Also, we simply don't need a large file, often landscape mode (16:9), for a small , portrait mode device. Most of the video is uselessly downloaded anyway as it is cropped and offscreen.
So you will learn how to avoid this waste of resources, and set another video file for your Elementor containers and sections.
Important: this works for self hosted videos only! It won't work with Vimeo or YouTube videos. Self hosting is generally a better option anyway, learn all about it in my self hosting videos tutorial.
Also, keep in mind the same restrictions for mobile videos will still apply. Learn about them in my Why won't my background video play on mobile tutorial.
First, add this code to your project
If you have Elementor Pro, you can add it in a custom code snippet. Otherwise, you can add it in an HTML element, in your footer template (presumably from a free addon).
Set it to load at the end of the <body>:
This code will check for all Elementor self hosted background videos on the page, and replace them with the one we set for mobile (more on this soon).
<script>
/* Code from https://element.how/elementor-different-background-video-mobile/
* Copyright 2023 element.how
*/
(function () {
let backgroundVideos = document.querySelectorAll('.elementor-background-video-hosted');
let isMobile = window.innerWidth < 768;
if (!isMobile) return;
backgroundVideos.forEach(video => {
let container = video.closest('[data-mobile-video]');
if (container && container.dataset.mobileVideo) {
let settingsObj = JSON.parse(container.dataset.settings);
if (settingsObj.background_video_link) settingsObj.background_video_link = container.dataset.mobileVideo;
container.setAttribute('data-settings', JSON.stringify(settingsObj));
}
});
}());
</script>
Then, set the mobile video URL
Now, you will want to go to the Advanced Tab in your container or section where the background video is and add a data attribute to set the URL of the mobile video.
It needs to look like this:
data-mobile-video|videofileurl.mp4
Example:
data-mobile-video|https://element.how/wp-content/uploads/2023/01/wordpress_admin_bar_toggler.mp4
Simply enter the URL to your optimized for mobile video file.
The Elementor background video fallback image
Now, let's take care of the fallback image. By default, Elementor doesn't give the option to choose a different image for desktop than mobile (for no good reason). So we will take care of it ourselves with some CSS.
Add this CSS to the container with the background video under Advanced > custom CSS:
@media (max-width:767px) {
selector.e-con.e-con.e-con {
background-image: url(https://templates.element.how/wp-content/uploads/2023/03/viet-nam-7741019_1280.jpg);
background-position-x: 50%;
background-position-y: 50%;
}
}
Adjust the background image URL to your mobile background fallback image.
If you are using Elementor sections (instead of containers) change this line:
selector.e-con.e-con.e-con {
to
selector.elementor-section.elementor-section.elementor-section {
Using Elementor Free? See how to add custom CSS to Elementor free.
Finally, enjoy your faster website!
I hope you have enjoyed this tutorial! You are now able to have mobile optimized background videos with Elementor!
Cheers!
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
3 Responses
Thanks a lot, this works perfect! I have been looking for this feature for a long time. Always used two sections/containers for this. Website is much faster now 🙂
The only thing I could not find out is how two have separate thumbnails (Background fallback) for desktop/mobile.
As for now (on mobile) it is loading the desktop fallback and then starts the mobile video. The framing of the video is slightly more aligned to one side (9:16) than the desktop fallback image so it looks like it is shifting before beginning to play. Any suggestions on that?
Greetings!
I updated the tutorial with information on how to do that!
Let me know if it works for you
Cheers!
Works perfect now! Thanks a lot Maxime!