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

To make a YouTube video perfectly rounded on Chrome on an iPhone 12 Pro in Webflow, you'll need to apply specific styling to handle iframe behavior and border-radius correctly.

1. Embed the YouTube Video Using an Embed Element  

• Use the Embed component from the Add panel.
• Paste your YouTube iframe embed code (you can customize the URL to include ?rel=0 for cleaner viewing).

2. Wrap the iFrame in a Div Block  

• Create a Div Block and give it a class (e.g., video-wrapper).
• Drag your Embed element (with the iframe) inside this Div Block.
• This wrapper will control the dimensions and rounding.

3. Set Wrapper Styles  

• Go to the Style tab for your video-wrapper.
• Set Position to Relative.
• Set a fixed width and height (e.g., 320px x 320px for a circle).
• Add a 100% border-radius to make it a perfect circle.
• Set Overflow to Hidden so the iframe doesn't extend beyond the circle.

4. Set iFrame Styles  

• Inside the Embed code, apply inline CSS styles to the iframe:
• Set width="100%" and height="100%".
• Add style="border-radius: inherit;" to inherit the circle shape.
• Also include style="position: absolute; top: 0; left: 0;" if you need full coverage inside the wrapper.

5. Ensure Responsiveness  

• For mobile responsiveness:
• Use VW (viewport width) units or percentages for width/height on smaller breakpoints.
• Maintain border-radius: 50% to keep the circular shape on all devices, including iPhone 12 Pro.

Summary  

To make a YouTube video perfectly rounded in Webflow on Chrome for iPhone 12 Pro, wrap the embed in a fixed-size Div with border-radius: 50% and overflow hidden, and ensure the iframe fills the wrapper entirely. This ensures a clean, circular video presentation on all modern mobile browsers.