How can I create a full-width background video using a Vimeo embed without the controls and with autoplay, but without it being 100vw and 100vh in Webflow?

TL;DR
  • Customize the Vimeo embed link with parameters autoplay=1, muted=1, and controls=0.
  • Add an Embed element in Webflow, paste the customized Vimeo embed code, and set the dimensions to full-width.
  • Adjust the video’s height for responsiveness across devices using Webflow’s design settings.

Creating a full-width background video in Webflow using a Vimeo embed requires specific settings to disable controls and enable autoplay while maintaining custom dimensions. Below is the solution you need:

​

1. Get the Vimeo Embed Link

  • Go to your Vimeo video and click on the “Share” button.
  • Select Embed to copy the embed code. You will customize this in Webflow.

​

2. Customize the Vimeo Embed Link

  • Modify the embed URL by adding parameters to autoplay=1, muted=1, and controls=0.
  • Your final URL should look like this: https://player.vimeo.com/video/[video_id]?autoplay=1&muted=1&controls=0&loop=1&background=1.

​

3. Add an Embed Element in Webflow

  • Drag an Embed element into your desired section on your Webflow canvas.
  • Paste the Vimeo embed code, replacing the default URL with your customized link from the previous step.

​

4. Define Custom Dimensions

  • Select the Embed element and go to the Style panel.
  • Set user-defined width (e.g., 100% to make it full-width) and a specific height to avoid 100vh, depending on your design needs.
  • Ensure its parent container or section is full-width as well to maintain consistency.

​

5. Make It Responsive

  • To ensure the video scales properly on different devices, use Webflow's responsive design settings to adjust the height for mobile or tablet views accordingly.

​

Summary

To create a full-width background video in Webflow using Vimeo, customize the embed link with parameters to disable controls and enable autoplay. Add an Embed element in Webflow, paste your modified embed code, and define specific width and height settings. Adjust the dimensions as needed for responsive design.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Why does the "go back to store" link not work on the 1440px breakpoint for the About Me block on my Webflow website?
How can I lock the size of an image in Webflow so that it remains the same within a circle or line, even when I replace the image?
What can I do to scroll fixed content within a div in Webflow?
What could be causing my background video to only appear as a line in my column after uploading it on Webflow?
Why is my website slow to load when I have implemented a .lottie animation on scroll in Webflow?
Is it possible to embed PHP and HTML code in a Webflow page to create a login form and validate user existence in a database?
How can I make changes in my web design specific to Mobile - Landscape and Mobile - Portrait views in Webflow, without affecting the desktop and tablet views?
How can I fix the issue with exporting an animation to JSON using the Bodymovin extension after the new After Effects update in Webflow?
Can I adjust the color of SVG icons in Webflow, similar to changing the background color?
How can I center an image under a heading in Webflow on a new page?
Can I create a portfolio site on Webflow using subdomains for multiple example sites, and can they all be published under a single Website Site Plan or would I need separate plans for each site? Can I also export some of the example sites and host them outside of Webflow to save costs?
How can I create a drop-down filter for my Webflow collection list that regenerates the results based on the selected category, without navigating to a new page?
How can I disable the default form submission and redirect functions in Webflow without breaking the code, while still being able to use my own JavaScript function?
How can I set up a category flow in Webflow, where each category photo links to its respective category page? Additionally, is there a way to vertically center text in a text box that covers 100% of the container behind it, for a hover effect where the whole photo grays out with centered text?
What are some tips for improving the speed score of a website in Webflow, in order to boost SEO?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?