Skip to content
English - United States
Nous Contacter
  • There are no suggestions because the search field is empty.

How to reduce the size of embedded videos on Webflow

Improve the performance and design of your hotel website

Key points:

  • Adjust the size and aspect ratio of a video embedded in Webflow.
  • Use a responsive container to avoid distortions.
  • Optimize video file size for faster loading speeds.

Integrating videos into your Webflow site is a great way to showcase your establishment, your rooms, or the guest experience. However, a video that is too large or not optimized can slow down your site and negatively impact the user experience. Here's how to resize it correctly.

Adjust the size with a container

In Webflow, always place your videos (YouTube, Vimeo or uploaded) in a Div Block.

  • Select your embedded video.
  • Drag it inside a Div Block.
  • Set a maximum width (e.g., 800px) or a percentage (e.g., 70%) to make it flexible. 💡 Tip: Use the parameter `max-width: 100%; height: auto;` so the video automatically adapts to all screen sizes.

Use a responsive ratio

To maintain good proportions, set a 16:9 ratio (classic landscape format). In Webflow Designer:

  • Select the video container.
  • Add a padding-top property of 56.25% to maintain the ratio.
  • Position the video absolutely inside the container.

Compress the video before integration

Large files slow down loading, especially on mobile.

  • Before uploading, compress the video using free tools like HandBrake or Clipchamp.
  • Reduce the resolution to a maximum of 1080p and aim for a file size of less than 20 MB. 💡 Opt for YouTube or Vimeo integration rather than direct hosting on Webflow: this significantly reduces the page size.

Control the rendering on mobile

Switch to Tablet and Mobile view in the Designer.

  • If the video extends beyond the edges, set a width of 100% and the height will adjust automatically.
  • You can also hide the video on mobile and display a thumbnail image with a link to the full video.

Best practices in hotel marketing

  • Choose an attractive thumbnail that illustrates your establishment.
  • Include a call-to-action button just below the video (“Book now” or “View rooms”).
  • Avoid videos longer than two minutes to maintain viewer attention.

Conclusion

Reducing the size of a video embedded in Webflow improves both the performance and visual quality of your hotel website. A well-sized video strengthens your brand image while offering smooth navigation on all devices.