我遇到了一个我完全不明白的问题。我有一个带有 YouTube 视频 iframe 的网站，想通过 CSS 来绕过边界。在 http://www.wunschpreisdeal.de/empfehlung/winterreifen-profiltiefe-und-zustand-noch-ok视频正确嵌入了圆形边框，但在 http://www.wunschpreisdeal.de/mitglieder-empfehlung/the-axe-effect 上并非如此.
它们都有相同的 CSS，我没有发现这些集成之间有任何区别。谁能帮我？如果您需要更多信息，请询问。 :)
谢谢
最佳答案
为了预先回答您的问题，这两个页面之间的区别在于将 wmode=transparent 添加到 iframe 地址，如下所示:http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent。这是一个让你继续前进的快速解决方案，但如果你想了解更多关于这个主题的知识，请继续阅读!
不幸的是，由于旧浏览器之间的差异，对 YouTube 和 Vimeo 等嵌入式视频进行圆 Angular 处理非常具有挑战性。甚至将 iframe 包装在外部 div 中，并将 border-radius 和 overflow: hidden 应用于包装器，这适用于大多数 iframe，可靠地 不能做到这一点!
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!
对于我们这些需要支持各种旧版浏览器的人来说，唯一始终可靠的方法是制作一个看起来像弯 Angular 的图像，并使用该图像的副本掩盖视频的每个 Angular 落。 (这里是我们需要我上面描述的 wmode=transparent 技巧的地方，因为某些浏览器会以其他方式在视频下显示 Angular 图像!)
以下是将此技术应用于嵌入 iframe 的 YouTube 视频的示例:http://jsfiddle.net/skywalkar/uyfR6/ (示例半径 = 20px)
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)
关于css - youtube 嵌入式视频作为带边框半径的 iframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12492250/