如何在Safari浏览器上制作圆形视频播放器

Question

我已经用chrome和firefox用css样式制作了一个圆形视频：

-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;

当我用Safari打开它时，它首先加载圆形，但当视频缩略图完全加载并显示视频控件时，它变成了方形。

我还尝试过制作视频圈的父div和overflow:hidden，但都不起作用。

Answer 1

我正在使用YouTube嵌入进行测试。请澄清您的视频是用哪个平台托管的，或者您是否嵌入了HTML5 video元素。

这似乎与视频本身的大小有关。只有在将视频的大小缩小到一定程度后，我才能复制这个问题。当iframe变得太小时，视频本身会在独立于控件的容器内缩放。这似乎是border-radius不服用的原因。这里有几个解决方案，尽管比简单地将border-radius: 100%添加到iframe稍微复杂一些。

---

一种解决方案是使用SVG（请参阅fiddle，因为SO不想显示视频播放）：

svg {
    display: block;
    width: 560px;
    height: 315px;
}

<svg>
    <clippath id="circle">
      <circle r="120" cx="50%" cy="50%"></circle>
    </clippath>
  
    <g clip-path="url(#circle)">   
   	<foreignObject width="560" x="0"
                y="0" height="315">
        <iframe width="560" height="315" src="//www.youtube.com/embed/QnxLau7m600?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </foreignObject>
   </g>	
</svg>

---

另一种解决方案是使用-webkit-mask-image:

div { 
  width: 300px;
  height: 300px;
  border-radius: 100%;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

<div>
   <iframe width="300" height="300" src="https://www.youtube.com/embed/QnxLau7m600" frameborder="0" allowfullscreen></iframe>
</div>

您也可以通过使用mask属性在Firefox中实现这一点，但您也需要使用SVG，而不是像mask: url(data:image/svg+xml;base64,...);那样的CSS渐变（这种特殊方法使用数据URI）。在跨浏览器兼容性方面，您显然还有一些工作要做。

---

这就是我现在的全部。如果我能想出另一个解决方案，我会汇报的。