How can I make an embedded video scale with the device size in Webflow?

To make an embedded video scale with the device size in Webflow, you can follow these steps:

1. Start by adding an embed element to your Webflow project. You can find the embed element under the Components tab in the Webflow Designer.

2. Copy the embed code provided by the video hosting platform (YouTube, Vimeo, etc.) you are using to embed the video.

3. Paste the embed code into the embed element you added in Webflow. You can do this by double-clicking the element and pasting the code in the modal that appears.

4. By default, the embed element will have its width set to 100%. This ensures that the video container spans the entire width of its parent element.

5. To make the video scale with the device size, you need to set the height of the embed element to 0 and apply a padding-bottom value using percentage. The padding-bottom value will determine the aspect ratio of the video container. For example, if you want a 16:9 aspect ratio, you can use a padding-bottom value of 56.25% (9 divided by 16 multiplied by 100).

6. To apply the padding-bottom value, select the embed element in the Webflow Designer, go to the Styles panel on the right-hand side, and click on the Add a new style rule icon.

7. In the new style rule, select the Property dropdown and choose Padding Bottom. Then enter the desired percentage value (e.g., 56.25%) in the Value field.

8. Save your changes and preview your site. The embedded video should now scale responsively with the device size, maintaining its aspect ratio.

By setting the embed element's height to 0 and applying padding-bottom, the video container will adjust its height based on the specified aspect ratio while automatically scaling with the device size. This ensures that the video remains fully visible and retains its proportions on any screen.