To make your YouTube video perfectly rounded in Webflow when viewing on a Chrome smartphone like the iPhone 12 Pro, you can follow these steps:
Step 1: Add a video element to your Webflow project:
- Open your Webflow project and navigate to the page where you want to add the rounded YouTube video.
- Drag and drop a "Video" element from the elements panel onto your page.
Step 2: Add the YouTube video URL to the video element:
- Select the video element on your page, and in the settings panel on the right side of the Webflow interface, click on the "Link Settings" tab.
- Paste the YouTube video URL into the "URL" field. Webflow will automatically embed the video onto your page.
Step 3: Apply custom CSS styling to make the video perfectly rounded:
- With the video selected, click on the "Styles" tab in the settings panel.
- Scroll down to the "Border" section and set the "Radius" to 50% or any value that suits your desired level of roundness.
Step 4: Check the video on a Chrome smartphone:
- Publish your Webflow project.
- Open the website on a Chrome browser on your iPhone 12 Pro (or any other smartphone) to ensure that it appears perfectly rounded.
Additionally, you may also want to make sure that the dimensions of your video element are square to maintain a perfect circle. You can adjust the width and height of the video element accordingly.
Please note that the above solution assumes you want a perfectly rounded shape for the video player itself and not just a rounded video thumbnail. If you want to round the video thumbnail instead, you would need to add custom CSS to target the thumbnail container and apply the rounded border styling on that specific element.
Remember to test your website on multiple devices and browsers to ensure consistent results.