css - 为嵌入式 YouTube 视频添加边框半径

Question

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

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

Answer 1

使用 CSS3 非常简单。你们都错过了扮演坏警察的 z-index。

看下面的代码，我将播放器包裹在一个 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>