Question

请参阅this fiddle。在加载border-radius之前立即注意正常工作。几毫秒后，圆角消失了。

如何为嵌入的YouTube视频添加圆角？

Answer 1

您只需设置边框样式：

border:20px solid #000;

http://jsfiddle.net/jalbertbowdenii/AkPXj/20/

Answer 2

使用CSS3非常简单。你们所有人都错过了z-index正在扮演坏警察。

查看下面的代码，我将播放器包装在一个div中，根据需要设置它的高度和宽度，根据需要将overflow设置为hidden和z-index。边界半径非常棒！

＆＃13;

.player {
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  height: 320px;
  width: 480px;
}

＆＃13;

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

＆＃13;

Answer 3

为了创建圆角的外观，您必须制作四个看似圆角的叠加div并将它们放置在每个角落。根本不是一个优雅的解决方案，但它是创造这种效果的唯一方法。

Answer 4

在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>

Answer 5

首先，浏览器将其视为任何其他块元素，并应用边框半径。然后flash对象完成加载并且只是越过顶部，因为无法在flash对象上使用border radius，它们会消失。

Answer 6

如果您被允许，请尝试直接嵌入/对象（最好使用swfobject或其他东西）和wmode =透明或wmode不透明（首选）

http://jsfiddle.net/AkPXj/19/

Answer 7

不幸的是，由于旧浏览器之间的差异，围绕YouTube和Vimeo等嵌入式Flash视频的角落非常具有挑战性。

如果您的所有最终用户都在运行支持HTML5的浏览器，那么只需将player=html5添加到iframe地址，如下所示：http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&player=html5。这将迫使他们的浏览器加载视频的HTML5版本，border-radius将正常工作。

如果您的某些最终用户的浏览器不支持支持HTML5，那么事情就会开始变得难看。

你的下一个最优雅的解决方案将类似于Ivijan-Stefan所建议的，即单独处理每个浏览器并在每个元素上抛出!important标记，可能通过向wmode=transparent添加iframe来补充http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent的地址如下：wmode=transparent。

这会为您带来一些额外的浏览器版本兼容性，因此您可以在此时调用它。

对于我们这些需要支持各种旧版浏览器（Internet Explorer 6，任何人？）的人来说，唯一的始终可靠的方法是通过制作一个看起来像的图像弯曲的角落，并使用此图像的副本来掩盖视频的每个角落。（这也需要我上面描述的iframe技巧，因为一些最严重的违规者否则会在视频下显示角落图像。

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

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

Answer 8

只有在youtube播放器上启用HTML5模式才能实现。

在这里演示：http://jsfiddle.net/3f9DB/1/

Answer 9

您可以像这样包装iframe：http://jsfiddle.net/xmarcos/D4sS7/

Answer 10

对于这个具有挑战性的问题，这是一个简单但非常实用且有用的“黑客解决方案”。

只需将iframe嵌入“div”元素中，如下所示：

  <div>
   <iframe allowfullscreen="" frameborder="0" height="445" player="html5"scrolling="no" src="https://www.youtube.com/embed/DCTwJJhQFy8"   width="780"></iframe>
  </div>

然后将以下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]

这是一个非常灵活的解决方案，尽管它为border-radius使用了一些额外的层。此方法还与大多数（所有）现代浏览器兼容。希望它有用。

Answer 11

您需要将此代码添加到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>

而且，只需将这些类分别应用于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>

最终结果应该这样显示。

Sample Image

为嵌入的YouTube视频添加border-radius

11 个答案: