视频启动时删除了youtube iframe边框半径

Question

我使用youtube中的嵌入代码并将CSS提供给边框半径：

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

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

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

我发现了另一篇帖子：youtube embedded video as iframe with border-radius 但它对我没有帮助。

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

Answer 1

你可以把它包起来并隐藏溢出。

视频的iframe忽略了播放器中包装器/容器的边框半径的问题来自几个因素，比如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