HTML5 Video Element with Rounded Corners shows black area

I have HTML5 Player with Video Object in WP Elementor.

I used this code to set rounded corners:

video{border-radius: 25px;
overflow: hidden;
-webkit-transform: translateZ(0);
box-shadow: 0 19px 51px 0 rgba(0,0,0,0.16), 0 14px 19px 0 rgba(0,0,0,0.07);}

Credit: https://stackoverflow.com/a/49681434

The rounded corners are showing very well, but there is a black area in the background that I wish to remove.

I tried this code to remove the balack area:

video::-webkit-media-controls-enclosure {
    border-radius: 25;
}

The Reference Image

But It didn't work

I found the solution credit to this stack

The solution is to put a Video Object inside DIV and apply CSS to that DIV

<div id="div_selector">
<video src="https://www.example.com/Videos/Film 1.mp4"></video>
</div>


#div_selector { margin-left: 50px;
    margin-right: 50px;
    margin-top: 50px;
    border-radius: 25px;
    overflow: hidden;
}