How can I change the automatically generated .jpg snapshot from a background video to a .webp format in Webflow?

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 change the automatically generated .jpg snapshot from a background video to a .webp format in Webflow, you can follow these steps:

Make sure your video is in the .webm format: Webflow automatically converts uploaded videos to .webm format, so you need to ensure that your video is in this format. If your video is not in .webm format, you can use video conversion tools or online services to convert it.
Upload the video to your Webflow project: Once your video is in the .webm format, you can upload it to your Webflow project by going to the Designer and selecting the desired page. Navigate to the Assets panel and click the '+' icon to upload the video file.
Set the background video: In the Designer, select the element (e.g., a div block) where you want the background video to appear. In the Style panel, go to the Background section and choose 'Background Video' from the 'Type' dropdown. Then, click the 'Add Video' button to select the uploaded video from the Assets panel.
Set the fallback image: Webflow automatically generates a .jpg snapshot from the video to serve as a fallback image in case the video cannot be displayed. By default, Webflow uses the .jpg format for this snapshot. To change it to a .webp format, you need to create a new image element and set it as the fallback image.
Add the .webp image: Drag and drop an image element onto your canvas, or select an existing one. In the element's Settings panel, click on the image field to choose the image file. When selecting the file, make sure it is in the .webp format. After adding the image, you can resize or position it as needed.
Remove the default fallback image: By default, Webflow displays the automatically generated .jpg fallback image. To remove this, select the element where the background video is set. In the Style panel, go to the Background section and delete the URL of the fallback image. This will remove the default fallback image.
Publish your changes: After completing the above steps, make sure to publish your changes to see the updated background video with the .webp fallback image.

By following these steps, you can change the automatically generated .jpg snapshot from a background video to a .webp format in Webflow. This will help optimize your website's performance and improve page load times, especially for users on devices that support the .webp format.

Additional Questions:

How do I upload a video to my Webflow project?
What is a fallback image in Webflow?
What are the benefits of using .webp format for images in Webflow?

How can I integrate Wikipedia JS into Webflow and pass parameters into text boxes and images?

Is there a solution for preventing a video from continuing to play after closing a modal window in Webflow without using custom code?

What could be causing the issue where the images in the third and seventh column of the work section of my website do not load on Chrome initially, but appear after refreshing or resizing the window?

Is it possible to combine 'javascript:delay('URL') with 'javascript:history.back()' in Webflow for creating an 'about' page with a page transition and a back button?

Have you encountered a similar issue when embedding a Vimeo video on a Webflow page where there is a 1 px grey border around the container holder? Is custom code required to fix this?

Is there a way to log the server response, specifically the payload, when submitting a form on the actual page in Webflow?

How can I create a PHP file to handle form submissions in Webflow?

How can I create a random link on my landing page in Webflow?

Is it possible to implement js or jquery to validate input fields for valid postal codes on Webflow?Can example@example be considered a valid email on Webflow?

Why do the phone screen pictures break up on non-retina screens in certain sections of the website, even though they are all marked as HiDPI and the same size?