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 embed in a Div Block, then set its width and height to 600px each in the mobile breakpoint.
  • Override embed code to set iframe dimensions to 600x600 and ensure no responsive styles (like width: 100%) override fixed sizing.

To maintain a fixed size of 600x600 pixels for a video embed on mobile view in Webflow, follow these steps to override responsive behavior and apply specific dimensions.

1. Add or Select the Embed Element

  • Drag an Embed, Video, or HTML Embed element into your Webflow canvas.
  • If you’re using an external video (like YouTube or Vimeo), you can use the Embed component and paste the video iframe source.

2. Wrap the Embed Inside a Div Block

  • Wrap the video embed in a Div Block to control its size more easily.
  • Name this div something like VideoWrapper for clarity.

3. Set Fixed Dimensions on Mobile View

  • Go to the mobile breakpoint in Webflow using the responsive view switcher.
  • Select the VideoWrapper div.
  • In the Style panel, set:
  • Width: 600px
  • Height: 600px
  • Make sure you set both properties to Fixed (px), not percentage or auto.

4. Prevent Scaling on Smaller Screens

  • Webflow’s default behavior scales content responsively. To retain fixed dimensions:
  • Still on the mobile view, select the VideoWrapper and in the Style panel:
    • Set Overflow: Auto or Hidden to avoid clip or breakage.
    • Optionally, set display: flex and justify/align center on the parent wrapper to center the video in a limited viewport.

5. Adjust the Embed Sizing

  • Some embeds (like YouTube) use responsive iframes (width 100%, height auto). You should override this:
  • Inside the embed HTML, set the iframe's width="600" and height="600" explicitly.
  • Also, ensure any style attributes or classes don't override this with 100%.

Summary

To keep a video at 600x600 pixels on mobile, wrap it in a div container, set fixed pixel dimensions in the mobile breakpoint, and adjust embed code to stop it from stretching. This ensures video dimensions remain consistent, regardless of screen size.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Does Webflow use load testing tools and third-party integrations to ensure peak performance and fast hosting for websites?
How can I create a zoom-in effect on an image inside a container using Webflow? I've tried using columns, an image, and a div with the parent set to "overflow: hidden" but the animation still isn't working. Can someone please guide me on where I might be going wrong?
How can I add horizontal and vertical borders to the cells in my 6-column by 3-row table in Webflow using Grid?
Why are some images missing on a published page in Webflow, when they appear fine in the Webflow designer?
How can I recreate the "timeline" design found on the Mission page of my website using Webflow?
How can I remove design elements like circles and lines from the mobile version of my Webflow site without affecting the website and tablet versions?
How can I create a slider on mobile where cards turn into slides, using Webflow?
Is there a way to redirect old URLs to new URLs in Webflow through the use of an .htaccess file?
How can I properly track form submissions on my Webflow site that come from Google Adwords? I have followed the steps provided by Google, but I am unsure about where to add the code and how to link it to the submit button. I have already attempted to add the code in the custom code section labeled "Inside tag". Can someone please help me with this?
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 full-page masonry grid portfolio with 4 columns and 3 rows using Webflow?
Is there a way to handle the 10,000 character limit on custom code elements in Webflow?
Where can I adjust the column and gutter widths of the guide overlay in Webflow?
How can I embed iFrame code from a Collection onto my Webflow site?
How can I properly embed a green particle animation in my Webflow site using Codepen?
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 use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
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 anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
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?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?