youtube嵌入视频if iframe with border-radius [英] youtube embedded video as iframe with border-radius

问题描述

我有一个问题，我绝对不明白。我有一个带有YouTube视频iframe的网站，并且希望通过CSS轮播边框。在 http://www.wunschpreisdeal.de/empfehlung/winterreifen- profiltiefe-und-zustand-noch-ok 视频正确嵌入了圆角边框，但 http://www.wunschpreisdeal.de/mitglieder-empfehlung/the-axe-effect 。

I got a problem I absolutely don't understand. I got a website with YouTube video iframe and want to round the borders via CSS. On http://www.wunschpreisdeal.de/empfehlung/winterreifen-profiltiefe-und-zustand-noch-ok the video is correctly embedded with rounded borders but that's not the case on http://www.wunschpreisdeal.de/mitglieder-empfehlung/the-axe-effect.

他们都有相同的CSS，我没有发现这些集成之间的任何区别。谁能帮助我？如果你需要一些更多的信息，只是问。 ：）

They both have the same CSS, I haven't found any difference between those integrations. Can anyone help me? If you need some more info, just ask. :)

thx

推荐答案

这两个页面之间的区别是 wmode = transparent 添加到 iframe 地址，如： http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent 。这是一个快速解决方案，让你去，但如果你想了解更多的主题，然后阅读。

To answer your question upfront, the difference between those two pages is the addition of wmode=transparent to the iframe address like so: http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent. That's a quick fix to get you going, but if you'd like to learn a bit more on the subject, then read on!

不幸的是，嵌入式视频（例如YouTube和Vimeo）的四舍五入是相当具有挑战性的，因为旧版浏览器之间的差异。甚至将 iframe 包装在外部 div 中并应用 border-radius iframes 起作用的包装器，$ c>和 overflow：hidden 做诀窍！

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!

注意：Ivijan-Stefan提出了一个优雅的解决方案，适用于大多数现代浏览器，因此如果您的网站不需要满足传统的浏览器，如Internet Explorer 6和7，然后随意使用他的实现！

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 的招式，因为有些浏览器会显示视频下的角图像）

For those of us that need to support a variety of legacy browsers, the only consistently reliable way to do this is by making an image that looks like a curved corner, and using copies of this image to cover up each of the corners of the video. (Here's where we require the wmode=transparent trick that I described above, since some browsers will otherwise display the corner images under the video!)

下面是一个应用于 iframe -embedded YouTube视频的技巧的示例： http://jsfiddle.net/skywalkar/uyfR6/ （example radius = 20px）

Here is an example of this technique applied to an iframe-embedded YouTube video: http://jsfiddle.net/skywalkar/uyfR6/ (example radius = 20px)

注意：如果你使角落覆盖太大（大于〜20px），那么它们会覆盖播放器控件！

为了最大限度地减少问题的影响，您可以尝试通过将图像旋转45度来切割角。这需要一组不同的覆盖和一些创造性的使用边距，但如果你需要更大的角半径可能是值得的： http://jsfiddle.net/skywalkar/BPnLh/ （example radius = 30px）

Note: If you make the corner overlays too large (greater than ~20px), then they will cover up the player controls!
To minimize the effects of problem, you can try cutting the corners by rotating the images by 45 degrees. This requires a different set of overlays and some creative use of margins, but may be worth the trouble if you need larger corner radii: http://jsfiddle.net/skywalkar/BPnLh/ (example radius = 30px)

这篇关于youtube嵌入视频if iframe with border-radius的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！