ボーダー

Question

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

これは私の境界が、私は-webkit-マスク画像を適用したもう後に表示されていない私は、CSSを通じてマスクを適用しているに私のビデオのdiv

.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%); 
} 

です。何とかこれを達成できますか（他の方法も大丈夫ですか？）

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があります。