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).

Share on facebook
Share on twitter
Share on linkedin

Author

Ohad Raz
Ohad Raz

Comments

17 Responses

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

    Thanks

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

  2. 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

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

  4. 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.

Leave a Reply

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