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

Question

请看这个小提琴.在加载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.边界半径非常棒!

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

Answer 3

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

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