How can I make different background videos for mobile and desktop on my Webflow site without affecting the loading speed?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To make different background videos for mobile and desktop on your Webflow site without impacting loading speed, you can follow these steps:

Prepare the videos: Start by creating two versions of the video you want to use - one optimized for mobile and the other for desktop. Ensure that the video files are compressed and optimized for playback on their respective devices.
Upload the videos to Webflow: Go to your Webflow project and head to the "Assets" panel. Upload both versions of the videos by clicking the "Upload" button.
Add background videos to sections: Now, go to the page where you want to add the different background videos. Select the section where you want to have the video background, or create a new section.
Set up the background video: With the section selected, go to the "Settings" panel on the right-hand side of the Webflow Designer. In the "Background" section, choose the option to have a background video.
Configure the desktop video: In the background video settings, you'll see an option called "Desktop." Select this option, and then select the desktop version of the video you uploaded in the "Video" dropdown menu.
Configure the mobile video: Next, click the "+ Add Mobile" button within the background video settings. In the new mobile video option that appears, select the mobile version of the video you uploaded in the "Video" dropdown menu.
Adjust settings: You can further customize the background video by adjusting other settings, such as the video playback mode (cover, contain, or actual size) and whether the video auto plays or loops.
Optimize video playback: To optimize video playback and loading speed, use appropriate video codecs and formats. MP4 with H.264 or WebM with VP8/VP9 are widely supported options, but do check browser compatibility for best results.

By following these steps, you can have different background videos for mobile and desktop on your Webflow site without sacrificing loading speed.

Additional Questions:

How do I optimize video files for faster loading on my Webflow site?
Can I use a YouTube video as a background video in Webflow?
Is it possible to have multiple background videos on a single page in Webflow?

How can I show background videos on IOS devices using Webflow?

What should I do if I created separate lines named under the class 'Separater line' and placed them under each image of every block, but can only see the lines in some images and not in others?

What is the best approach for setting global styles in Webflow that cannot be done directly in the design editor?

Why is the color of my hamburger icon not changing from black to white in Webflow?

What could be the reason for the background image not showing on certain devices in Webflow?

How can I add static text on top of the slider slides using Webflow?

What is the issue with the sizing of images in Webflow and how can it be fixed?

Does selecting/clicking on an arrow in the Slider Element stop the automatic cycle of changing slides in Webflow?

How can I fix the issue of my images appearing small on the browser in Webflow?

How can I prevent my menu from disappearing in Webflow?