Webflow sync, pageviews & more.
NEW

How can I maintain a fixed size of 600x600 for a video embed on mobile view using Webflow?

TL;DR
  • Wrap the video in a Div Block with 600x600px dimensions, set Overflow to Hidden, and give it a unique class.
  • Insert a custom Embed inside the Div with fixed width and height (600x600) and remove any responsive styles or attributes.
  • Ensure styles remain fixed at 600x600px in mobile breakpoints and avoid any % or responsive units in iframe or container styling.

To maintain a fixed video size of 600x600 pixels on mobile view in Webflow, you'll need to override the default responsive behavior for embeds.

1. Use a Div Wrapper to Contain the Video

  • Drag a Div Block into your layout.
  • Set its width and height to 600px in the Style panel.
  • Add a unique class name (e.g., fixed-video).
  • Set Overflow: Hidden to prevent any visual spillover.
  • Set Position: Relative if you plan to position the video inside absolutely.

2. Add the Video Embed Inside the Div

  • Drag an Embed element into the fixed-video Div.
  • Paste your video embed code (YouTube, Vimeo, etc.).
  • Many embeds are responsive by default using width="100%" and height="100%" or aspect ratio CSS—instead:
  • Set fixed values: width="600" and height="600" in the embed code directly.
  • Also, make sure to remove or adjust any style rules like style="max-width: 100%;".

3. Prevent Responsive Behavior on Mobile

  • Select the fixed-video class in mobile view (under the mobile breakpoint).
  • Make sure the width and height remain 600px.
  • Set Display: Block, Overflow: Hidden, and no max-width.
  • Avoid using % values, vw, or other responsive units for the embed iframe.

4. Disable Auto-Scaling From Webflow or Browsers

  • In the embed code, check for attributes like width="100%", style="max-width:100%", or CSS rules that can cause scaling—replace those with width="600" and height="600".
  • Add loading="lazy" to help load performance, if desired.

Summary

To fix a video at 600x600 on mobile in Webflow, wrap it in a Div Block with explicit pixel dimensions, use a custom Embed with fixed width/height set directly in the <iframe>, and make sure no responsive styling overrides are applied in smaller breakpoints.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What could be causing the issue with the 100vh rule on the nav container in Webflow, particularly on mobile devices where there is some scrollable space?
How can I add external scripts (CSS and JS) to a specific page on my website using Webflow?
Is it possible to offer users a free trial with Webflow Memberships/Ecommerce only, without using any third-party tools?
Can I create a square div within a parent div in Webflow, where the square's width is 100% of the parent div and the height matches the width?
What could be causing the forms on my friend's Webflow website to stop working suddenly, even though no recent changes have been made to the forms?
How can I position a background image relative to the right side of an element in Webflow and add a fixed pixel distance to prevent overlapping and breaking when the button label is long?
How can I make the Yearly tab in Webflow's Ecommerce Section responsive, allowing users to switch between monthly and yearly pricing options? Currently, only monthly pricing is visible.
Why is it important for Webflow to add the correct webkit prefixed CSS attribute into their default CSS engine to fix this bug affecting multi-line gradient texts and backgrounds in parent divs on Safari / iOS?
How can I make the first service always open in Webflow, and manually close it when I open the second service?
What could be causing elements like pictures, fonts, and buttons to shift off the page when updating a website on Webflow?
How can I set up a multi-step form in Webflow with radio button fields where at least one option is required to be selected before moving to the next slide?
What is the current best workaround in Webflow for adding a "select country" list into forms, without using ecommerce and considering limitations on maximum number of items and characters for custom code?
How can I link each of my CMS collections, "stays_austria" and "paris", to the items on the travel selection section on my Webflow homepage?
How can I adjust the left margin of a header container in Webflow when the container margins are locked to keep it responsive?
How can you maximize your Webflow site performance and improve speed and load times?
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!
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?