youtube 嵌入视频作为具有边框半径的 iframe答案

【问题标题】：youtube embedded video as iframe with border-radiusyoutube 嵌入视频作为具有边框半径的 iframe
【发布时间】：2012-09-11 14:48:03
【问题描述】：

我遇到了一个我完全不明白的问题。我有一个带有 YouTube 视频 iframe 的网站，并希望通过 CSS 来环绕边框。在http://www.wunschpreisdeal.de/empfehlung/winterreifen-profiltiefe-und-zustand-noch-ok 上，视频正确嵌入了圆形边框，但在http://www.wunschpreisdeal.de/mitglieder-empfehlung/the-axe-effect 上并非如此。

它们都有相同的 CSS，我没有发现这些集成之间有任何区别。谁能帮我？如果您需要更多信息，请询问。 :)

谢谢

【问题讨论】：

在 Chrome 上，border-radius 对它们都不起作用。
哦，我明白了。但是为什么那个在 FF 中工作而在另一页上却没有呢？或者更好的是，有没有办法在所有浏览器中实现圆角边框（可以排除 IE ;)）。
你可以在这里找到一些帮助：stackoverflow.com/questions/6535217/…

标签： css iframe youtube rounded-corners

【解决方案1】：

为了提前回答您的问题，这两个页面之间的区别在于将wmode=transparent 添加到iframe 地址，如下所示：http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent。这是一个快速解决问题的方法，但如果您想了解更多有关该主题的信息，请继续阅读！

不幸的是，由于旧版浏览器之间的差异，对嵌入视频（如 YouTube 和 Vimeo）进行圆角处理非常具有挑战性。即使将iframe 包装在外部div 中，并将border-radius 和overflow: hidden 应用于适用于大多数iframes 的包装器，也不能可靠地 解决问题！

注意：Ivijan-Stefan 在下面提出了一个适用于大多数现代浏览器的优雅解决方案，因此如果您的网站不需要迎合 Internet Explorer 6 和 7 等旧版浏览器，那么请随意使用他的实现！

对于我们这些需要支持各种旧版浏览器的人来说，唯一始终可靠的方法是制作一个看起来像弯角的图像，并使用该图像的副本覆盖视频的每个角落。（这里我们需要我上面描述的wmode=transparent 技巧，因为某些浏览器会在视频下方显示角落图像！）

以下是将此技术应用于 iframe 嵌入的 YouTube 视频的示例：http://jsfiddle.net/skywalkar/uyfR6/（示例半径 = 20px）

注意：如果你让角落覆盖太大（大于~20px），那么它们会覆盖播放器控件！
为了尽量减少问题的影响，您可以尝试通过将图像旋转 45 度来切角。这需要一组不同的叠加层和一些创造性地使用边距，但如果您需要更大的圆角半径，这可能是值得的：http://jsfiddle.net/skywalkar/BPnLh/（示例半径 = 30px）

【讨论】：

【解决方案2】：

小而美的把戏。

iframe,
object,
embed{
    border:5px solid rgba(255,255,255,0);
    -webkit-border-radius: 20px !important; 
    -ms-border-radius: 20px !important; 
    -o-border-radius: 20px !important;  
    border-radius: 20px !important;     
}

DEMO

【讨论】：

这适用于现代浏览器，因此 +1 可以获得更优雅的解决方案；我的回答是针对旧版浏览器（例如 IE6）设计的，因此这两种方法之间的选择最终归结为您是否想要（或需要）支持此类用户。
谢谢你。我用了很长时间。我知道旧的 IE 和 Safari 造成了问题，因为我将所有解决方案都提供给人们自己决定。在未来，将只添加足够的边界半径，仅此而已。如果我们有时见面，我请你喝啤酒。