CODEWITHSUNDEEP
jqueryhtmlcssvideoiframe
Velimir Lazarevic
Velimir Lazarevic

Reputation: 323

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)?

Upvotes: 1

Views: 425

Answers (1)

Karin
Karin

Reputation: 8610

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.

Upvotes: 1

Related Questions