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?

Is the issue with the white space above the footer and navbar in Webflow a result of the design or is it a bug?

Does anyone have experience with coding a "save for later" functionality in Webflow that allows users to bookmark pages and view their saved items in a user-specific page?

Is it currently possible to have a full section scroll snap in Webflow while also having scroll into view animations play?

How can the color of the placeholder text in the form input field be changed in Webflow?

Are there any specific steps I should be taking in the Webflow navigator tab to successfully move a section to a different section of my site without it nesting into something else?

What could be causing the issue with overlapping sections in Webflow when viewed on Safari but not on Chrome?

Can you provide assistance with moving elements in a grid using Webflow?

How can I track the number of form submissions (weekly and monthly) and display the dollar figure from a specific input field on a dashboard page in Webflow?

How can I create classes to apply different styles to blog post images on Webflow?

How can I remove the grey play button that appears when tapping on other pages in Webflow?