蒙版视频 iframe 周围的边框

Posted 2023-05-09

【中文标题】蒙版视频 iframe 周围的边框

【英文标题】：Border around masked video iframe

【发布时间】：2016-12-21 00:05:11

【问题描述】：

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

这是我通过 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%);

应用-webkit-mask-image 后，我的边框不再可见。我可以以某种方式实现这一点（其他方式也可以）？

【问题讨论】：

你的意思是“我的边框不再可见”，从你的代码中有 div 元素的边框，它似乎正在工作 - JsFiddle

当我在谷歌浏览器中打开它时，它没有显示边框：6px solid #fff;来自我的代码。

你试过#fff以外的其他颜色

是的，但它不起作用。我试过 .videoCircle:after content:'';边框：6px 纯红色；位置：绝对； z-index：40000；

有没有办法以圆形显示视频而不是添加：-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

【参考方案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。