CSS 为嵌入的 YouTube 视频添加边界半径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7811719/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding border-radius for embedded YouTube video
提问by Randomblue
Please see this fiddle. Notice instantly before loading the border-radiusworks fine. A few milliseconds later the rounded corners disappear.
请看这个小提琴。在加载border-radius工作正常之前立即通知。几毫秒后，圆角消失。
How can I add rounded corners to embedded YouTube videos?
如何为嵌入的 YouTube 视频添加圆角？
回答by albert
You just have to set your border styles:
您只需要设置边框样式：
border:20px solid #000;
回答by Sibidharan
This is very simple using CSS3. All you guys are missing out is the z-indexwhich is playing bad cop.
这使用 CSS3 非常简单。你们所错过的z-index只是扮演坏警察的角色。
Look at the code below, I wrapped the player in a div, set it's height and width as I like, set overflow to hidden and z-index as required. Border radius works pretty awesome!
看下面的代码，我将播放器包裹在一个 div 中，根据需要设置它的高度和宽度，根据需要将溢出设置为隐藏和 z-index。边界半径效果非常棒！
.player {
border-radius: 10px;
overflow: hidden;
z-index: 1;
height: 320px;
width: 480px;
}<div class="player">
<iframe width="480" height="320" src="https://www.youtube.com/embed/aiegUzPX8Zc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>回答by dirkdigital
An example to get rounded corners on youtube videos or anything else, like iframes or img tags.
在 youtube 视频或其他任何东西（如 iframe 或 img 标签）上获得圆角的示例。
<div style="
width: 560px;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); /*ios 7 border-radius-bug */
-webkit-transform: rotate(0.000001deg); /*mac os 10.6 safari 5 border-radius-bug */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
overflow: hidden;
">
<iframe width="560" height="315" src="http://www.youtube.com/embed/ZM0e1m9T9HQ" frameborder="0">
</iframe>
</div>
回答by Nate B
In order to create the look of rounded corners, you would have to make four overlay divs that look like a rounded corner and position them at each corner. Not an elegant solution at all, but it's the only way to create that effect.
为了创建圆角的外观，您必须制作四个div看起来像圆角的overlay并将它们放置在每个角上。根本不是一个优雅的解决方案，但它是创造这种效果的唯一方法。
回答by 472084
At first the browser treats it like any other block element and applies the border radius. Then the flash object finishes loading and just goes over the top, as there is no way to use border radius on a flash object, they disappear.
起初，浏览器将其视为任何其他块元素并应用边框半径。然后 flash 对象完成加载并越过顶部，因为无法在 flash 对象上使用边框半径，它们消失了。
回答by yunzen
If you are allowed to, try a direct embed/object (best with swfobject or something) and wmode = transparent or wmode opaque (preferred)
如果允许，请尝试直接嵌入/对象（最好使用 swfobject 或其他东西）和 wmode = transparent 或 wmode opaque（首选）
回答by RobotZombieLord
Unfortunately, rounding the corners of embedded Flash videos such as YouTube and Vimeo is quite challenging due to the differences between older browsers.
不幸的是，由于旧浏览器之间的差异，对嵌入的 Flash 视频（如 YouTube 和 Vimeo）进行四舍五入非常具有挑战性。
If all of your end users are running a browser that supports HTML5, then just add player=html5to the iframeaddress like so: http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&player=html5. This will force their browser to load the HTML5 version of the video, and the border-radiuswill work just fine.
如果你所有的最终用户正在运行的浏览器支持HTML5，那么只需添加player=html5到iframe地址，像这样：http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&player=html5。这将强制他们的浏览器加载视频的 HTML5 版本，并且border-radius会正常工作。
If some of your end users' browsers don'tsupport HTML5, then things start to get ugly.
如果您的某些最终用户的浏览器不支持 HTML5，那么事情就会变得很糟糕。
Your next-most elegant solution will be something like what Ivijan-Stefan suggested, which is to address each browser individually and throw the !importanttag on each element, possibly supplemented by adding wmode=transparentto the iframeaddress like so: http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent.
你的下一个最优雅的解决方案将会像什么Ivijan -斯特凡建议，这是分别应对浏览器，并抛出了!important每一个元素，可能是通过增加补充标签上wmode=transparent的iframe地址，像这样：http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent。
This will buy you a few extra browser versions' worth of compatibility, so you might be able to call it quits at this point.
这将为您购买一些额外的浏览器版本的兼容性，因此您可以在此时退出。
For those of us that need to support a variety of legacy browsers (Internet Explorer 6, anyone?), however, the only consistentlyreliable 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. (This also requires the wmode=transparenttrick that I described above, since some of the worst offenders will otherwise display the corner images underthe video!)
对于我们这些需要支持各种传统浏览器（Internet Explorer 6中，任何人吗？），但是，只有持续可靠的方式来做到这一点是通过使图像看起来像一个弯曲的角落，而这个形象的使用拷贝掩盖视频的每个角落。（这也需要wmode=transparent我上面描述的技巧，因为一些最坏的罪犯会在视频下显示角落图像！）
Here is an example of this technique applied to an iframe-embedded YouTube video: http://jsfiddle.net/skywalkar/uyfR6/(example radius = 20px)
以下是将此技术应用于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 this 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)
注意：如果您将角覆盖设置得太大（大于 ~20 像素），那么它们将覆盖播放器控件！
为了尽量减少此问题的影响，您可以尝试通过将图像旋转 45 度来切角。这需要一组不同的叠加层和一些创造性地使用边距，但如果您需要更大的角半径，可能值得麻烦：http: //jsfiddle.net/skywalkar/BPnLh/（示例半径 = 30px）
回答by Minki Ju
You need to add this code into your css.
您需要将此代码添加到您的 css 中。
<style>
.div-round {
overflow: hidden;
position: relative;
z-index: 10;
-webkit-border-radius: 20px;
border-radius: 20px;
}
.div-round::before {
display: block;
content: "";
}
.iframe-round {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
width: 100%;
height: 100%;
border: 0;
-webkit-border-radius: 20px;
border-radius: 20px;
}
</style>
And, just apply those classes into your div and iframe individually.
而且，只需将这些类分别应用到您的 div 和 iframe 中。
<div class="div-round" style="width: 640px; height: 360px;">
<iframe class="iframe-round" allow="autoplay; encrypted-media; fullscreen" src="https://www.youtube.com/embed/Xjs6fnpPWy4?modestbranding=1&autoplay=0"></iframe>
</div>
The final result should be displayed like this.
最终结果应该是这样显示的。
回答by user6123836
Here's an easy yet very practical and useful "hack-solution" to this challenging problem.
对于这个具有挑战性的问题，这是一个简单但非常实用且有用的“黑客解决方案”。
Just embed your iframe in a "div" element like this:
只需将您的 iframe 嵌入到“div”元素中，如下所示：
<div>
<iframe allowfullscreen="" frameborder="0" height="445" player="html5"scrolling="no" src="https://www.youtube.com/embed/DCTwJJhQFy8" width="780"></iframe>
</div>
then add the following css to your HTML:
然后将以下 css 添加到您的 HTML 中：
div {
position: relative;
display:inline-block;
margin:200px;
}
div:before {
content: '';
position: absolute;
z-index: 5000;
display: block;
top: -27px;
left: -27px;
right: -27px;
bottom: -27px;
background-color: transparent;
pointer-events: none;
border: 30px solid white;
border-radius: 50px;
}][1]
This is quite a flexible solution, though it uses some additional layer for border-radius. This method is also compatible with most (all) modern browsers. Hope it was useful.
这是一个非常灵活的解决方案，尽管它使用一些附加层作为边界半径。此方法也与大多数（所有）现代浏览器兼容。希望它有用。
回答by xmarcos
You can wrap the iframe like this: http://jsfiddle.net/xmarcos/D4sS7/
您可以像这样包装 iframe：http: //jsfiddle.net/xmarcos/D4sS7/
