Video Element Frame rounded corners but not Video

Good day Themeco Team,

I have a video element on my home page and I set the frame to have rounded corners and drop shadow. It looks good and matches the rounded corners I have on my images (including custom CSS for the feature images):
image
However, when the video plays it cuts into the rounded corners of the frame:
image
I would have thought that the frame would be on top of the video unless I missed a setting somewhere. With the image element, there are inner and outer border radii settings, but with the video element there is only a single border radius setting for the frame. I tried to use the suggestion from this post, but unfortunately it did not work as it seems to be for embedded YouTube videos and this is a local video (‘Player’ type).

Can you give me some guidance on how to get the video to have rounded corners like the images so it doesn’t cut into the frame? Do I need to change to the ‘Classic Video Player’ element? Do I need to scale the video smaller than the frame radius (don’t know the setting for this)?

Your help is greatly appreciated.

Hello @GregoryArndt,

Thanks for writing to us.

In order to have a border radius I would suggest you go to the Video element —>Customize —>Element CSS.

$el .x-mejs video{
  border-radius: 15px;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

Hi @prakash_s,

Thank you very much for the help. It worked great. Themeco team awesome as usual.

Perhaps this could be added as a setting to the element in a future build. If the frame of the element has a radius setting, it would be helpful if the primary would have a radius setting as well similar to the image element.

Hi @GregoryArndt,

Glad that we are able to help you. We will surely check this with our development team if possible to add this.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.