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）。在跨浏览器兼容性方面，您显然需要做一些工作。

这就是我现在所拥有的一切。如果我能想到另一个解决方案，我会报告。

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

1 个答案: