4 rounded corners on YouTube video iframe

Question

I'd like to make the 4 corners of a YouTube video iframe rounded.

<div class="youTubeContainer">
  <iframe width="500" height="300" src="https://www.youtube.com/embed/QzDeMXSgGl0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.youTubeContainer {
    width: 100%;
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
    -webkit-transform: rotate(0.000001deg);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    }

.youTubeContainer .video {
    width: 100%;
    height: 410px;
}

The problem with the code above is that only some corners become rounded. What do I need to fix to make all 4 corners rounded no matter the height.

Heres the fiddle: https://jsfiddle.net/gb4aLxks/

Answer 1

Set the .youTubeContainer to inline-flex to remove the small amount of white-space that is preventing the corners from properly sticking.

jsFiddle