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).
34 Responses
I do not see the toggle in the settings? Am I looking in the wrong place?
Nevermind, found it!
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.
You guys are doing a really great job.. Elementor is becoming a successful journey.
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!
Hey Elementor team! Love you guys, any status update on this? Where can I find the toggle to play background video on mobile?
Is there a way of setting one background video for desktop displays and a different sized version of the same video for mobile devices?
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?
Excellent observation… I was tryng to find this kind of info
Thanks Ohad
There are many things to learn, so much information on it.
King regards,
Balle Hessellund
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.
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
Did you find any solution? i also want to display full height Video (section background) in mobile.
I think there is not
1. disable for mobile
2. duplicate section
3. change link to mp4
4. enable for mobile only and disable for tablet / desktop
this doesn’t work…
I just did this last week and it was my solution. It worked fine.
Hi, is there a way to swap the video with a gif for mobile?
Are there any updates regarding video background on mobile devices?
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
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?
I know it’s old stuff but I had the same issue today with a youtube video displaying black bars in smaller views (tablet and mobile). It turns out that the lementor js code handling the video size changeVideoSize() when dealing with youtube videos is getting it from the iframe wrong whenever a youtube video is not exactly 16:9. By downloading the mp4 and hosting it, the size eneded up being calculated right in all sizes.
Having the same issue as Gaut and looking for a fix
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.
I’m also having the same issue as Gaut and Eric and would like a solution.
Is there already a solution for this?
my video bg worked, until i changed the video link now it doesnt autoplay on mobile anymore
So developers of elementor are you alive?
Did read all the above complaints?
Are you thinking to give an answer and fix the problem?
thanks for sharing content I solved my website issue there is an option to play on mobile https://akaatent.com
Thanks a loot Ohad Raz, was able to solve the issue for my Car Parking Shade webiste, the mobile version of my website is fast also thanks a loot
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.
Thanks for the loot Ohad Raz, I managed to solve the problem for my Rental Tents Website . The mobile version of my site is fast thanks for the swag too
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
Reply
”
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.
Excited about the new background video feature in Elementor 2.7! It adds a dynamic touch to mobile design. Great update!|
I 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.