STAY TUNED, ALMOST THERE.
INSPIRATION ZONE
MANGE ACCOUNTS
HAVE ANY QUESTIONS?
TECHNICAL SUPPORT
24x7 REFERENCES
WHAT'S NEW?
WE BELIVE IN GOOD

How to make Mobile Friendly Video Background in Elementor | Tested : Working in Safari, Chrome and Other (iOS & Android)

Have you always looking for to run videos in your mobile devices as a background? You must have tried may times but it must not been working out as you wanted it to.
We were constantly trying to get this feature in our The Plus Addons for Elementor Page Builder, As We constantly getting request for that. And Recently We got news from Webkit.org about new video policies for iOS. We tried it immediately and made all necessary changes. Cheers! We are successful in this attempt.

Caution : Many UX Expert suggest not to use mobile videos in background as It might increase page size and that will impact on loading speed of website in mobile devices.

Solution : You may compress your video and try to keep that less than 1 MB and use overlay on that, Which will hide your blurry video and It will load faster too. In all cases, We have Image Background/Fall Back image so your visitor never see, white background until video will be loaded.

How to Prepare Responsive MP4 Video for Responsive background?

2. Upload Your File.
3. Enter value in Set file size Option. You need to enter value, How much you need size of your video. We recommend less than 1 MB size but If you have bigger video You might go up to 3-4 MB.

4. Convert Video's Frame Rate to 29 in below setting.

5. Disable audio track: Enable (Select This)

This Selection is must because, iOS opens Videos with Audio Trek in their player so that will not let video to load in the background.

6. Rest Options needs to keep as it is, Unless You need those to use with your personal purpose.

7. Press “Start Conversion” and Your converted video will be available to download.

Now, You have video ready to use in the row background. Upload that video in the media player to use in our “Row backgorund” Widget in Elementor.

Setup Video background using "Row Background" Widget.

1. Drag and Drop “Row background” Widget from Elementor Panel.
2. Select Option at the deep layer “Video background”
3. Select Video Options from Different Options. Note: In Youtube and Vimeo Options, Those will not work in mobile/tablet device. In those, Just fallback image will appear by default. Once you select option to turn on responsive background video, You will be able to use that but in self-hosted format only.
4. Select Fallback image. This image will be visible until video will load or In case, video will not load on that place.
5. Turn On Responsive Background Option.
As You will turn on this option, You will have option to upload mp4 format of video. Keep in mind to create video as per above mentioned process. You can select video for Tablet and Mobile both.
Extra Tips :

1. Desktop Video & Mobile Image : You can keep responsive video background option disabled to keep on showing Image in Mobile version.

2. Desktop Video & Mobile GIF : You can upload GIF in fallback image under responsive image option, That will make you load gif in mobile device.

Hope above tutorial will be helpful for you to create amazing mobile layouts in this mobile first web world. If you have any further questions or want to show some demos made by you, Feel free to drop it in the comment box below.
Don’t forget to subscribe us, We will get back to you soon with new blog post.

Add Comment

Want to supercharge your Elementor based Website?
Fastest, Biggest and most Advanced Elementor Addons. It will change the way you are working with elementor.
INSPIRATION ZONE
MANGE ACCOUNTS
HAVE ANY QUESTIONS?
TECHNICAL SUPPORT
24x7 REFERENCES
WHAT'S NEW?
WE BELIVE IN GOOD
X