2

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

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

谢谢

4

2 回答 2

3

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

Unfortunately, rounding the corners of embedded videos such as YouTube and Vimeo is quite challenging due to the differences between older browsers. Even wrapping the iframe in an outer div and applying a border-radius and overflow: hidden to the wrapper, which works for most iframes, doesn't reliably do the trick!

Note: Ivijan-Stefan came up with an elegant solution below that works in most modern browsers, so if your site doesn't need to cater to legacy browsers like Internet Explorer 6 and 7, then feel free to use his implementation instead!

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

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

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

于 2013-03-13T19:37:03.873 回答
3

小而美丽的把戏。

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;     
}

演示

于 2014-10-02T11:53:19.700 回答