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?
To 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, you can follow these steps:
1. First, you need to add a new section to your Webflow project where you want the video background to appear. Make sure this section has a class name assigned to it.
2. Within the section, add a new `div` element and give it another class name. This `div` will contain your Vimeo embed.
3. Next, navigate to the Vimeo video you want to use and click on the "Share" button below the video player. From the options that appear, click on the "Show options" link.
4. In the "Embed" section, you'll find an iframe code for embedding the video. Copy the entire iframe code.
5. Return to your Webflow project and paste the iframe code inside the `div` element you created earlier. It should look something like this:
```html
6. Now, apply CSS styles to the `.video-container` class to make it a full-width background video. Add the following CSS code to your project by either using the Webflow Designer or by adding it to your custom CSS file:
```css
.video-container {
position: relative;
height: 0;
padding-bottom: 56.25%; /* Set the aspect ratio (9:16 => 9 / 16 * 100 = 56.25%) */
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```
7. Finally, customize the video options to remove the controls and enable autoplay. Locate the `iframe` element within the `.video-container` class and add the following attributes to it:
```html
\`\`\`Make sure the `autoplay` attribute is included in the `allow` attribute. Additionally, you can add the `muted` attribute to mute the video by default:
```html
\`\`\`That's it! You've successfully created a full-width background video using a Vimeo embed without the controls and with autoplay in Webflow. The video will now play automatically in the background and fit the width of its parent container without stretching to 100vw and 100vh.