邊框屏蔽視頻的iframe

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

這是我所通過CSS應用的蒙我的視頻格邊框屏蔽視頻的iframe

.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-掩碼圖像。我能以某種方式實現這一點（其他方式也可以）？

來源

2016-08-14 Velimir Lazarevic

你的意思是「我的邊框不再可見」，你的代碼中有div元素的邊框，並且它似乎在工作 - [** JsFiddle **]（https://jsfiddle.net/fu51m4x2 /） –

當我在谷歌瀏覽器中打開它時，它不顯示我的邊框：6px solid #fff;從我的代碼。 –

您嘗試了不同於'＃fff'的顏色嗎？ –

用overflow: hidden替換-webkit-mask-image: ...。

.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。

來源

2016-08-14 16:30:59 Karin

邊框屏蔽視頻的iframe

回答

相關問題