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

【问题标题】：youtube iframe border radius removed when video start视频开始时删除 youtube iframe 边框半径
【发布时间】：2016-10-08 17:46:30
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

youtube embedded video as iframe with border-radius的可能重复
您是否尝试过 DOM 检查以了解究竟发生了什么？
我编辑我的问题并添加图片来解释它

标签： css html youtube-iframe-api

【解决方案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

【讨论】：