Elementor Different Background Video on Mobile For Speed

Elementor Different Background Video on Mobile For Speed

Just Released: 10 Popular Web Hosts Tested In Depth

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>:

Elementor Different Background Video on Mobile For Speed 1

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> 
/* Please login to get the code 
 * The code will be for the Elementor Different Background Video on Mobile For Speed tutorial 
 * Found at this URL https://element.how/elementor-different-background-video-mobile/ 
 */ 
</script>

Elementor Different Background Video on Mobile For Speed 2

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:

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Different Background Video on Mobile For Speed tutorial 
 * Found at this URL https://element.how/elementor-different-background-video-mobile/ 
 */ 
</script>

Elementor Different Background Video on Mobile For Speed 3

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:

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Different Background Video on Mobile For Speed tutorial 
 * Found at this URL https://element.how/elementor-different-background-video-mobile/ 
 */ 
</script>

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.

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

Checkout the Elementor Addon Finder directly

7 Responses

  1. 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?

  2. Hey! Do I understand correctly, that it is doable on with Elementor Pro? Because on the free version the Custom attributes tab is not available.

    1. Hey Aleksander!

      That's right. In the tutorial I had kind of forgotten that the custom attributes were a Pro feature...

      So indeed this tutorial only works for Elementor Pro.

Leave a Reply