Граница вокруг маскируется видео IFrame

Question

<div class="videoCircle"> 
<iframe width="250" height="250" src="https://www.youtube.com/embed/wcVkPoPsuNU" frameborder="0" allowfullscreen></iframe> 

это мое видео ДИВ, на котором я применил маску через CSS

.videoCircle { 
    width: 250px; 
    height: 250px; 
    position: absolute; 
    border-radius: 125px; 
    border: 6px solid #fff; 
    top: 320px; 
    margin:0 45% 0 45%; 
    z-index: 30000; 
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); 
} 

Моя граница не видна больше после того, как я применил -webkit-маски-образа. Могу ли я это сделать каким-то образом (другие способы тоже в порядке)?

Answer 1

Заменить -webkit-mask-image: ... на overflow: hidden.

.videoCircle { 
    width: 250px; 
    height: 250px; 
    position: absolute; 
    border-radius: 125px; 
    border: 6px solid green; 
    top: 320px; 
    margin: 0 45% 0 45%; 
    z-index: 30000; 
    overflow: hidden; 
    // -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); 
} 

Вот fiddle.