How can I make an embedded video scale with the device size in Webflow?
TL;DR
- Add a Video Embed element and paste the iframe embed code.
- Wrap the embed in a Div Block, set width to 100%, and give it a class (e.g.,
"video-wrapper"). - Apply CSS to maintain aspect ratio: set padding-bottom to 56.25% and make the iframe absolute with 100% width and height.
- Alternatively, use Webflow’s built-in Video Element, setting its width to 100% for automatic responsiveness.
To make an embedded video scale with the device size in Webflow, you need to ensure it maintains a responsive aspect ratio. Follow these steps to accomplish this:
1. Use Webflow’s Embed Element
- Add a Video Embed or Embed element in Webflow.
- Paste your iframe embed code (e.g., from YouTube or Vimeo).
2. Adjust the Embed Container
- Wrap the Embed element inside a Div Block.
- Give the Div Block a custom class (e.g.,
"video-wrapper"). - Set its width to 100% and adjust the height dynamically.
3. Apply a Responsive Aspect Ratio
- Select the "video-wrapper" Div.
- Add Custom CSS in Webflow’s Page or Site Settings using the Embed Code section:
```css
.video-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%; /_ 16:9 Aspect Ratio _/
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
``` - This ensures the video scales proportionally based on its container’s width.
4. Alternative: Webflow's Built-In Responsive Video
- If using a Video Element (instead of an iframe embed), Webflow automatically makes it responsive.
- Just set its width to 100% under the Style panel.
Summary
To make an embedded video responsive, wrap it in a Div Block, apply CSS for a flexible aspect ratio, or use Webflow’s built-in video scaling. This ensures the video adjusts dynamically across devices.