Elementor 2.7: Background Video in Mobile Mode

Cover image

Elementor has enabled adding videos as a background for sections for a long time now. 

In desktop mode, this worked great. In mobile mode, since mobile browsers blocked the autoplay feature for embedded videos, we hid the video backgrounds simply by giving the video container a CSS attribute of display: none.

This worked great, up until a few months ago, when several mobile browsers started to loosen their policy on blocking video autoplay. Unfortunately, this caused hidden videos to auto-play sound. Since we hide the video display itself, this was confusing for Elementor users and especially for mobile visitors of Elementor-based websites that used the background video feature.

Some developers and advanced users took advantage of this policy change in their websites by overriding our display CSS attribute with a display: block value, so their embedded videos are displayed in mobile as well. 

Starting from Elementor 2.7.0, such manipulation on the video container will not work. Due to this policy change by a variety of mobile browsers, we decided to change the way we remove background videos from mobile mode. Instead of simply hiding the video content with display: none, we will be removing the video content completely in mobile devices.

Since we learned that many users want the option to show the background video in mobile as well, we will also add an option (a toggle in the settings panel) to enable showing the background video in mobile mode. However, it is important to note that since not all mobile browsers allow video autoplay, video section background might not work on all mobile devices (in blocking browsers, users will probably see a black screen).


Ohad Raz
Ohad Raz

32 Responses

  1. Currently while inserting background video in the Elementor while previewing it in the mobile view it shows that the video will be displayed in the mobile view in such manner but when the website is opened in the mobile the complete area is blank i.e. the video area is replaced by background color and whatever the elements are put on it are displayed like text border etc.

  2. I used to be suggested this web site by way of my cousin. I’m not certain whether this put up
    is written by way of him as no one else realize such
    detailed about my problem. You’re incredible!
    Thank you!

  3. Hey Elementor team! Love you guys, any status update on this? Where can I find the toggle to play background video on mobile?

  4. Is there a way of setting one background video for desktop displays and a different sized version of the same video for mobile devices?

  5. How can I provide a workaround now?
    But even most of the browsers block the sound of the video or the autoplay of a sound-widget. Even embedded HTML-code doesn’t work.
    Any help?

  6. An outstanding share! I have just forwarded this
    onto a co-worker who had been doing a little homework on this.
    And he in fact ordered me dinner because I found it
    for him… lol. So allow me to reword this….
    Thank YOU for the meal!! But yeah, thanks for spending some time to talk about this
    matter here on your internet site.

  7. Hello, I was wondering if there is any way to have elementor link a different mp4 file ( I want to use a more vertical video for mobile ) when is mobile?


    1. 1. disable for mobile
      2. duplicate section
      3. change link to mp4
      4. enable for mobile only and disable for tablet / desktop

  8. Hi,
    This is actually very wired article as tested today on Apple device (safari browser) the autopay feature works very well.
    I never needed to insert the videos at the background since now.
    But this is not that simple.

    Since more users are using mobile devices the mobile version of the video is more important. So, I created two versions, horizontal one for mobile and landscape one for desktops.
    What a surprise when I actually started to do it in Elementor.

    There is no option to have this responsive in fact there is not much options to adjust the video anyway. No option to add the class or own CSS, so we can swap the URL’s by media queries or something. No positioning options, and this is Elementor Pro.

    I have send you the ticket about this and as I’ve said that more and more I’m thinking to start to code my websites myself without the tools like Elementor because we are spending more time figuring out how to get some things to work than we will actually code this in PHP, HTML and CSS.
    I might be wrong but, after so many years this is incredible how this features is overlooked by Elementor team.
    Next time when you decide to remove the responsiveness leave this to the users.
    Leave the feature there and don’t bother if mobile phones have or doesn’t have an autoplay.

    Can you advice if there is any other way currently to use two different video clips for mobile and desktop?

    Many thanks

  9. Why is it that when I choose a YouTube video for my Background, it displays perfectly in web

    But on mobile, I see black bars on top and bottom and it’s not scaled in?

    It looks so ugly.

    Is there a fix?

  10. I have the same issue. I have a large backgrpund video that plays perfect on desktop, but I am not able to align the video so it is in the correct position on mobile.

    I also request the ability to have separate mobile and desktop videos, or a way to properly position the background video when viewing the page on a mobile device.

  11. The comment by Min Woo Park is a solution that might work for a lot of you who are using video as the background with Elementor. Now I have had success with just using Play on Mobile but I’ve had to change the Responsive view to phone and then adjust the margin bottom so that the video takes up the entire screen. Keep in mind that the sides of the video will not show. When making this change I used the settings of Content Width: Full Width and Height: Fit to Screen. It has acted a little strange in that it doesn’t see to work at first but if I toggle the responsive view to desktop and back to mobile I see the change. The work around through gives me more options. So you basically have to make two sections, one for the desktop background and one for the mobile background. On the desktop section turn off the Play on Mobile option and then change the responsive view settings to hide on mobile. Then do the opposite for the mobile section. Turn the Play on Mobile on and then change the responsive view settings to hide on desktop and tablet. I then make my adjustments for each type of screen to the associated background section. I’ve only done this with videos that I have uploaded to the media section so idk how Youtube and other videos will respond but with two sections you’ll have more options. I also usually upload a specific video for the phone view that I’ve made in a 18:9 aspect since 16:9 seems to be a thing of the past.

  12. By following the above:

    “Min Woo Park
    December 25, 2021 at 6:36 pm
    1. disable for mobile
    2. duplicate section
    3. change link to mp4
    4. enable for mobile only and disable for tablet / desktop


    And having two seperate sections essentially, I’ve been able to isolate how I want my mobile to look exactly, and how I want my desktop + tablet to look exactly. Great work around imo.

Leave a Reply

Your email address will not be published. Required fields are marked *