Velimir Lazarevic Velimir Lazarevic - 3 months ago 10
CSS Question

Border around masked video iframe

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


this is my video div on which I have applied mask through 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%);
}


My border is not visible anymore after I have applied -webkit-mask-image. Can I achieve this somehow (other ways are ok too)?

Answer

Replace -webkit-mask-image: ... with 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%);
}

Here's a fiddle.