How can I make an embedded video scale with the device size in Webflow?
TL;DR
- Wrap the embed in a div with 100% width, relative positioning, 0 height, and 56.25% padding-top for aspect ratio.
- Inside, place the iframe with absolute positioning and set its top, left, width, and height to 0, 0, 100%, and 100%, respectively, to make the video scale responsively.
To make an embedded video scale with the device size in Webflow, you need to apply responsive styles to the embed container so the video adapts fluidly to different screen widths.
1. Use a Responsive Embed Container
- Drag a “Div Block” into your page where you want the video to appear.
- Give the div a class like “video-wrapper”.
- Set this div’s width to 100% and its position to relative.
- Add padding-top: 56.25% (for a 16:9 aspect ratio) to this wrapper — this creates a flexible height.
- Set the div's height to 0px so the vertical space adapts dynamically.
2. Add the Video Embed Inside the Wrapper
- Inside the wrapper div, add an Embed element (
</>). - Paste your iframe embed code (e.g., YouTube or Vimeo embed) into the embed code box.
- Make sure the iframe inside the embed code has:
- position: absolute
- top: 0, left: 0
- width: 100%
- height: 100%
These rules ensure the iframe will fully fill the padded wrapper area and scale with it.
3. Optional – Use Webflow's Video Element
- If you're embedding a hosted MP4 video, consider using the built-in Video element from the Add panel.
- Set its width to 100%, and it will automatically scale with the parent container.
- Note: This works for direct video files, not YouTube or Vimeo embeds.
4. Test Responsiveness
- Use Webflow’s Preview mode and Device views (Desktop, Tablet, Mobile) to ensure the video resizes correctly.
- Publish the site and test on actual devices if possible.
Summary
Use a div wrapper with 56.25% padding-top and relative positioning around your embed, and apply absolute, full-size positioning to the iframe. This ensures your video scales responsively across all devices.