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.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

Is it possible to upload an HTML file to the root directory in Webflow for Facebook verification?

Does Webflow support the implementation of AMP, Accelerated Mobile Pages?

How can I achieve a smooth scrolling effect in Webflow, like the one on the Oui Will website?

Are there any workarounds or tips to create long modal windows in Webflow that can be scrolled and have a fixed background with a semitransparent overlay?

When will subscription elements be introduced into e-commerce on Webflow and are there any details available about the functionality?

Can scrolling be prevented when the off-canvas menu is open in Webflow?

What is the optimization recommendation for the <div class="lightbox-wrapper"> and <a class="lightbox"> in Webflow when running the site through Google's page speed tool?

What is the best way to transfer the design of my static pages from Bubble to Webflow without using the Webflow Plugin?

Is there a straightforward method, such as using custom code or attributes, to showcase individual form submissions for each paid client within their Webflow dashboard, considering the current setup where the form data is sent to Trello and a CMS?

How can I create a dropdown menu in the hero section of a Webflow website that is preselected based on the ad that brought the user there?

How can I fix the issue where the slideshow on my Webflow website's homepage is not showing up in the published version, but is visible in design mode?

How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?

How can I handle the onClick function of a button in Webflow to fill the background color of a newly created div block using JS code?

How can I preview a blog post in full screen before publishing on Webflow?

Why does the colors and styles on a client website change when accessing it through Webflow Editor?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

How can I dynamically redirect to a CMS created after form submission in Webflow?

In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!

How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?

Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?

How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?

How can I close a dropdown in Webflow when clicking on a link?

Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?

How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?

How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?

How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?

How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?

How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?

How can I change the language of the Google Maps embed from English to Arabic in Webflow?

How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?