边框屏蔽视频的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

回答

相关问题