youtube嵌入视频为iframe,带有border-radius

时间:2012-09-19 09:46:18

标签: css iframe youtube rounded-corners

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

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

THX

2 个答案:

答案 0 :(得分:3)

要提前回答您的问题,这两个页面之间的区别是wmode=transparent地址添加iframe,如下所示:http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent。这是一个快速解决方案,让你去,但如果你想了解更多关于这个问题,请继续阅读!


不幸的是,由于旧浏览器之间的差异,围绕YouTube和Vimeo等嵌入式视频的角落非常具有挑战性。即使将iframe包裹在外div中并将border-radiusoverflow: 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)

答案 1 :(得分: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