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

TL;DR
  • Create a Div Block set to 100% width for the video.
  • Insert and modify the video embed code to use a 100% width and CSS padding-top for aspect ratio.
  • Apply CSS styling for responsive scaling across devices.

To make an embedded video scale with the device size in Webflow, the video should be responsive. Here's how you can do that:

​

1. Create a Div Block

  • Add a Div Block to your Webflow project where you want the video to appear.
  • Ensure that this Div Block is set to a 100% width to allow it to scale fully across the container.

​

2. Embed the Video

  • Insert an Embed Element inside the Div Block.
  • Paste Your Video Embed Code into the Embed Element. Make sure the embed code includes the necessary responsive attributes.

​

3. Alter the Embed Code for Responsiveness

  • Find the width and height attributes in the embed code and remove these fixed pixel values.
  • Set the Width to 100% to let the video fill the containing element.
  • Use CSS Padding-Top to maintain aspect ratio. For example, if you want a 16:9 aspect ratio, set padding-top to 56.25%.

​

4. Apply CSS Styling

  • Add CSS Styling to your project for responsive video. Use the class you applied to the Div Block and define properties as needed, such as the padding-top for aspect ratio maintenance.

​

Final Summary

To make an embedded video responsive in Webflow, embed the video in a Div Block set to 100% width, adjust the embed code to use percentage-based dimensions, and apply CSS for aspect ratio. This ensures the video scales effectively across all device sizes.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I add an event-specific pixel for Linkedin tracking on button click in Webflow without leading users to another URL for success?
How can I freeze the body content while allowing the content in the Webflow lightbox to scroll separately?
What options should I set in Webflow to make this text wrap to a new line and align the "5 videos ^" to the right?
How can I apply custom CSS code to style the scrollbar on my Webflow site? I've tried placing the code in the Settings section under custom code and in the Head Code, and applying the class to either the body or the "filter_options" div in the project, but I'm not seeing any changes. Any suggestions?
Do I need to set a global canonical page URL in Webflow for my website with unique content in all pages?
How can I create a map on a website using Webflow, JavaScript, Collection Lists, and Google Maps API?
Can I create an uneven grid layout using a CMS collection in Webflow?
Can Webflow be used to create this?
How can I hide the TypeForm link inside a link block in Webflow to implement a full-screen popup on a button press?
How can I extend my Webflow form with more input types using the Webflow form widget and the embed widget?
How can I style a HTML embed form in Webflow for job applications, when the embed code from the client has no styling options in their back-end?
What are alternative solutions to the 10,000 item limit in Webflow for building a theater website with multiple shows, performances, and characters?
How can I rearrange the order of CMS content in Webflow?
What are you currently using for video hosting and what features would you like to see in a Webflow video hosting solution like Vidzflow?
Has anyone used Passage by 1Password with the Webflow built-in user CMS?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
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?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?