Webflow sync, pageviews & more.
NEW

How can I make my YouTube video perfectly rounded in Webflow when viewing on a Chrome smartphone (iPhone 12 Pro)?

TL;DR
  • Embed the YouTube video in a Div Block with equal width and height, apply a large border-radius and overflow: hidden for rounding.
  • Use the padding-top technique for responsive aspect ratio and test on an iPhone 12 Pro or Webflow’s mobile preview.

To make your YouTube video perfectly rounded in Webflow on a Chrome browser using an iPhone 12 Pro, you need to use specific styling on the embed element and ensure mobile responsiveness is properly configured.

1. Use an Embed or Video Wrapper

  • Add an Embed element from the Add panel in Webflow.
  • Paste your YouTube video embed URL or iframe code.
  • If you use the default Video element, it may have limitations in styling, so prefer the Embed element for full control.

2. Wrap the Embed in a Div Block

  • Place the Embed element inside a Div Block, which will act as your styled container.
  • Give the Div Block a class, e.g., video-wrapper.

3. Apply Border Radius to the Wrapper

  • Select the video-wrapper class.
  • Set equal Border radius values on all four corners.
  • Example: 50px or 9999px for a circle (use 50% only if it's a square).
  • Ensure the dimensions are equal (width = height) to make it perfectly round.
  • Set Overflow: Hidden on the wrapper to clip overflowing corners.

4. Set Fixed Aspect Ratio Using Padding

  • To keep the video responsive, apply the “padding-top” hack:
  • Set the video-wrapper to position: relative.
  • Inside it, give the Embed div position: absolute, top/left/right/bottom = 0.
  • On the wrapper, set a padding-top of 56.25% for a standard 16:9 aspect ratio.
  • This ensures the iframe scales proportionally while maintaining border radius.

5. Test Responsiveness for iPhone 12 Pro

  • Open Webflow's Designer > Preview mode, and select the iPhone 12 Pro in Device Preview.
  • Alternatively, publish the site and inspect using a real iPhone 12 Pro with Chrome.
  • Webflow’s responsive settings are usually sufficient, but double-check widths and height to ensure the container remains square on mobile.

6. Optimize Embed Parameters

  • In your YouTube iframe URL, add parameters like ?rel=0&modestbranding=1 to customize playback.
  • This doesn't affect rounding but improves UX.

Summary

To make a YouTube video perfectly rounded on Chrome/iPhone 12 Pro, wrap the embed in a Div Block with equal width and height, apply a large border-radius and overflow: hidden, and use the padding-top technique for aspect-ratio responsiveness. Always test on the actual device or Webflow’s mobile preview.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I create a dynamic drop-down filter for a CMS list in Webflow, similar to the one on this website? Thanks!
How can I improve my Page Speed in Webflow to eliminate render-blocking resources and improve the first paint of my page?
What is the recommended method for hosting an open graph image in Webflow?
Is anyone experiencing an Invalid Workspace Error with Webflow?
How can I download files that are included as Assets in Webflow?
How is Webflow utilized by the Webflow team for building new webpages and integrating with the backend?
Is there a solution in Webflow to address CSS and Javascript optimization for improving the PageSpeed Score?
How close is Webflow to releasing the user permissions feature for creating a member-only area for private documents, postings, etc.? I have existing clients who are requesting this functionality.
How can I load a JSON file in the Webflow Custom Code section, and where should I place or write a new PHP file to display Jobvite data?
What is the issue I'm encountering when trying to paste my A records into Google Domains for my Webflow website?
How can I ensure that the tablet design in Webflow matches the PC design, especially when the tablet is set horizontally?
How can I add more options to the options field in the CMS for the Produce list in Webflow?
How can I put the background video in Webflow behind everything? Why don't I get 4 cells when I create 4 columns in my quick stack in Webflow?
How can I center an image in a column in Webflow?
How can I disable fullPage.js on mobile view in Webflow? I have tried setting related Div Blocks to "Hide on Phone Portrait" but it doesn't seem to work. Is there a way to add a few lines of JavaScript code to achieve this?
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 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 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?