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 iframe inside a Div Block with fixed dimensions, border-radius: 50%, and overflow hidden.
Style the iframe with 100% width and height, and inherit the border-radius to ensure a circular appearance across devices like the 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.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

Why are my .ttf files not appearing when trying to upload a folder of Google's Roboto fonts to Webflow's custom fonts in site settings, even though the folder shows that it contains the files on my desktop? Any advice on what to do?

Is it possible to make the logo slider in the retailer sections of my Webflow site continuously rotate smoothly from right to left instead of changing like a regular slider?

How can I make a Webflow gallery where hovering over a product enlarges it and clicking the product reveals more information, with the product remaining enlarged if it has been clicked?

How can I add a sticky top banner above the Nav Bar Menu in Webflow, while ensuring it doesn't break the navigation bar?

What is a CSS trick to scale an <code><iframe></code> element to a specific aspect ratio in Webflow?

Can I upload individual html, css, and javascript files as separate pages in Webflow Hosting or do I need to switch to a different hosting provider?

Can animation settings be easily copied and pasted onto a new picture or div block in Webflow or do they need to be redone each time?

How can I upload a folder containing necessary files like ruby files, js files, CSS files, and SCSS files to a Webflow project in order to add Slick Slider?

Are there any Webflow-compatible booking, calendar, and payment platforms that offer customizable styling options for integrating into a website?

How can I find out which pages in Webflow unused assets belong to after deleting them?

What is the average earnings and number of sold templates per person on Webflow? Which templates are the best sellers?

What are the benefits of using Webflow hosting and its infrastructure for my project?

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?

What are some basic tips for using Webflow?

Does anyone have experience using locomotive scroll to create sticky elements on a Webflow website? I'm looking to replicate the functionality shown on this website: [link]

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?