To resize a background video in Webflow so that it always fits centered without cutting off the sides, you can follow these steps:
1. Add a section element to your Webflow project and set it to full-width by selecting it and enabling the "Full" width option in the responsive settings panel.
2. Within the section, add a div block and give it a class name. This will be the container for your background video.
3. Set the position of the div block to relative by selecting it and going to the styles panel. This will allow its child elements to position themselves relative to the div block.
4. Inside the div block, add an empty HTML embed element by clicking on the plus icon (+) and choosing the "Embed" option.
5. Double-click on the embed element to open the code editor. Insert the HTML code to embed your video into the `
6. Go back to the styles panel and select the div block. Enable the "Overflow" option and set it to "Hidden." This will ensure that the video does not overflow and get cut off.
7. Next, set the position of the div block's child (the embedded video) to absolute. This will allow the video to be positioned within the div block.
8. Set the video's top, right, bottom, and left positions to 0 and its width and height to 100%. This will make the video fill the entire div block, making it full-width and responsive.
9. To center the video horizontally and vertically within the div block, use the following custom CSS code:
```css
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
```
10. You can also add additional styles to customize the appearance of the background video, such as adding an overlay, adjusting the opacity, or applying filters.
By following these steps, you'll be able to resize a background video in Webflow so that it always fits centered without cutting off the sides. Remember to test your design on different devices and screen sizes to ensure it remains responsive.