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?

image 2019 07 27T04 48 19 445Z The Plus Addons for Elementor
2. Upload Your File.
image 2019 07 27T04 53 37 553Z The Plus Addons for Elementor
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.
image 2019 07 27T04 58 07 788Z The Plus Addons for Elementor

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

step4 The Plus Addons for Elementor

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.
image 2019 07 27T12 23 17 053Z min The Plus Addons for Elementor
2. Select Option at the deep layer “Video background”
image 2019 07 27T12 20 28 468Z min The Plus Addons for Elementor
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.
image 2019 07 27T12 21 56 402Z min The Plus Addons for Elementor
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.

Leave Your Comment

Follow Us

Subscribe

Subscribe us for Amazing Updates and News about Elementor.

X