视频开始时删除了 youtube iframe 边框半径

Question

我正在使用来自 youtube 的嵌入代码并将其 CSS 设置为边框半径：

.iframe {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

iframe 获取边框半径，但在我点击开始视频后，角变回平方。

如何强制 iframe 获取边框半径？

我找到另一个 post: youtube embedded video as iframe with border-radius 但这对我没有帮助。

我添加两张图片来解释我的问题：

Answer 1

您可以将其包装起来并隐藏溢出。

播放时视频的 iframe 忽略 wrapper/container 的边界半径的问题是由几个因素造成的，例如 z-index 和定位等。

这是我用来创建它的CSS。

.bord-rad-yt-container{
  margin:0 auto;
  border:1px solid blue;
  padding:0;
  display:inline-block;
  overflow:hidden;
  border-radius:25%;
  z-index:2;
  position:relative;
}

我还冒昧地提供了一个并排比较两者的示例。

http://codepen.io/anon/pen/ZObPGX

视频开始时删除了 youtube iframe 边框半径

youtube iframe border radius removed when video start

html

css

youtube-iframe-api