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 preview the new material symbols in Webflow's preview without having to publish and refresh the website?

How can I make smooth scrolling work with sticky elements in Webflow?

How can I remove a dropdown menu option from the mobile version of my Navbar in Webflow without creating a separate Nav Menu?

Can anyone help me with a issue I'm having in Webflow where a button border is appearing at the ends of a gradient even when it's set to transparent?

Why isn't the custom font I uploaded showing up in the font editor on Webflow?

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

Is it possible to trigger animations on Webflow natively, or would I need to use custom code to create the scroll and hover animations for the progress bars?

What can be done to prevent images from scaling down to a small size on the published site in Webflow?

What is the quickest way to create different links for the CTA button at the bottom of a duplicated page in Webflow?

Do you find that using global class names and setting a height on the body for the font as 1.25 is a common practice in Webflow?