Can I add rounded corners to Youtube videos and remove all icons except for the play button on the videos in Webflow?

TL;DR
  • Embed a YouTube video in Webflow using a video element and the YouTube embed link.
  • Use custom CSS in page settings to apply rounded corners to the video iframe and URL parameters to hide icons.
  • Publish and verify changes to ensure the desired appearance.

To customize the appearance of YouTube videos in Webflow with rounded corners and minimize icons, you will need to adjust some settings and use custom CSS. Here’s how you can do it:

​

1. Embed the YouTube Video

  • Add a Video Element: Use the Webflow Designer to drag and drop a video element into your page.
  • Copy the YouTube Embed Link: Obtain the embed link from YouTube for the desired video.
  • Paste the Link: Insert this link into the video embed field in Webflow.

​

2. Customize Video Appearance with Custom CSS

  • Open Page Settings: Go to the specific page settings where the video is embedded.
  • Add Custom Code in the Head Code: Insert a style tag with your CSS to adjust the appearance.
  • Apply Rounded Corners: Use CSS to give the video rounded corners by targeting the iframe. For example: iframe { border-radius: 10px; }.
  • Hide Icons With Parameters: Add ?controls=0&modestbranding=1 to the YouTube embed URL to minimize the display of icons, leaving primarily the play button visible.

​

3. Publish and Test Your Changes

  • Publish Your Webflow Site: Click on the publish button to make your changes live.
  • Verify the Display: Check that the video is displaying with rounded corners and limited icons on the published site.

​

Summary

You can add rounded corners to YouTube videos in Webflow by using custom CSS within the Page Settings. Additionally, use URL parameters to hide most icons, leaving only the play button visible. Always publish and verify to ensure the desired look.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I fix the issue of the scrollbar line not being displayed on iOS devices for the horizontal scroll gallery on my Webflow site?
How can I use the Multi Language feature in Webflow to create pages with different languages?
How to integrate Chart.js into Webflow and display the chart on a subpage?
What are some third party tools or integrations for Webflow?
Where can I give my client designer rights in Webflow to allow them to implement smaller changes without needing to involve me?
How can I create an animated hero section on my website using Webflow?
How can I fix the issue with the Slider on Webflow not being accessible for screen readers?
How can I create a fixed-size grid/table in Webflow that remains 940px across all device sizes and enables side-scrolling for overflow on small devices?
Can Webflow provide a solution for calculating shipping costs based on different cities in Brazil, considering the variations in shipping rates?
What are the best practices for creating a Webflow slider that can be easily updated by contributors using the CMS? Can a background image tile be set for the slider to allow for future changes and updates by contributors? Are there any official resources or guides available for creating dynamic sliders in Webflow CMS?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
What other e-commerce solutions can be used with Webflow for creating and managing products on a website?
Can you assist with an issue on our Webflow site involving the "Jobs" button on the jobs page?
How can I replace images in a Webflow template that are labeled "for illustration purposes only" instead of deleting them?
How can I test transactions on my Webflow Ecommerce site before launching, specifically with regards to UK card numbers and potential issues with Stripe's test card numbers?
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?