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

Yes, you can add rounded corners to YouTube videos and customize the video player controls in Webflow. Here's how you can achieve this:

​

1. Add a YouTube video to your Webflow project: 

   - Drag and drop an Embed element onto your Webflow canvas or into a desired container.

   - Click on the Embed element, and in the settings panel on the right, paste the YouTube video's embed code in the "Embed Code" field.

​

2. Styling the YouTube video:

   - To add rounded corners to the video, you can select the Embed element and add custom CSS to give it a border-radius property. For example:

     ```css

     .embed-container {

       border-radius: 8px;

       overflow: hidden;

     }

     ```

​

3. Customizing video player controls:

   - By default, you cannot directly manipulate the YouTube player controls. However, you can use YouTube's Player API to hide the default controls and implement custom controls. Here's how you can do it:

     - Add a `<div>` element to your Webflow project where you want to display the video player controls.

     - Give the `<div>` an ID, e.g., `player-controls`.

     - In the custom code section of your Webflow project settings, add the following code to enable the YouTube Player API and hide the default controls:

       ```html

       <script>

         // This code loads the IFrame Player API JavaScript code.

         var tag = document.createElement('script');

         tag.src = "https://www.youtube.com/iframe_api";

         var firstScriptTag = document.getElementsByTagName('script')[0];

         firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

​

         // This function creates an <iframe> (and YouTube player) after the API code downloads.

         var player;

         function onYouTubeIframeAPIReady() {

           player = new YT.Player('player-controls', {

             videoId: 'YOUR_VIDEO_ID',

             playerVars: {

               controls: 0, // Hide default YouTube controls

               showinfo: 0, // Hide video information and title

             },

           });

         }

       </script>

       ```

​

     - Replace `'YOUR_VIDEO_ID'` in the code above with the actual YouTube video ID you want to embed. You can find the video ID in the YouTube URL, usually a combination of letters and numbers after `v=`.

     - Customize the `player-controls` `<div>` element as needed using CSS, positioning it over the video or within the player container.

​

4. Custom play button:

   - To add a custom play button, you can create an element (e.g., a `<div>`, `<button>`, or `<span>`) and use CSS to style it to resemble a play symbol.

   - Position the custom play button over the video or within the player controls.

   - Add an event listener to the play button element to trigger the video playback using the YouTube Player API functions, such as `player.playVideo()`.

​

Remember to replace `'YOUR_VIDEO_ID'` with the actual video ID and adjust the CSS styles and positioning according to your design preferences.