What is the solution to get a video embed with corners to work in Safari on Webflow?

Published on
September 22, 2023

To get a video embed with rounded corners to work in Safari on Webflow, you can follow these steps:

  1. Add a video embed element: Start by adding a video embed element to your Webflow project. You can do this by dragging and dropping the "Video" element onto your page.

  2. Insert your video embed code: Next, you will need to insert your video embed code. This is typically provided by the video hosting platform you are using. For example, if you are using YouTube, you can find the embed code by clicking on the "Share" button below the video and selecting the "Embed" option.

  3. Customize the video embed: With the video embed element selected, you can customize its appearance by adjusting the settings in the right panel. To give the video embed rounded corners, you will need to use custom CSS.

  4. Add custom CSS: To add rounded corners to the video embed, you can use the border-radius property in CSS. Here's an example of how to apply rounded corners to a video embed:

    ```css
    .video-embed {
    border-radius: 10px;
    overflow: hidden;
    }
    ```

    In this example, video-embed is the CSS class applied to the video embed element. Adjust the border-radius value to your desired corner roundness. The overflow: hidden property ensures that the video stays within the rounded corners.

  5. Test in Safari: Finally, you should preview your website in Safari to ensure that the video embed is displaying with rounded corners as intended. If everything looks good, you can publish your website for the changes to take effect.

Additionally, make sure you have a newer version of Safari, as older versions might not fully support CSS properties like border-radius. Testing your website in various versions of Safari or using browser testing tools can help ensure cross-browser compatibility.

By following these steps, you should be able to get a video embed with rounded corners to work in Safari on Webflow.

Additional Questions:

  1. How do I add a video embed element in Webflow?
  2. What is the CSS property to give an element rounded corners?
  3. How can I test my website for cross-browser compatibility in Webflow?