为嵌入的 YouTube 视频添加边界半径 [英] Adding border-radius for embedded YouTube video

问题描述

请参阅这个小提琴.在加载 border-radius 之前立即通知工作正常.几毫秒后，圆角消失了.

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

解决方案

这使用 CSS3 非常简单.你们错过的只是扮演坏警察的 z-index.

看下面的代码，我将播放器包裹在一个 div 中，根据需要设置它的高度和宽度，根据需要将溢出设置为隐藏和 z-index.边界半径效果非常棒！

.player {边框半径:10px；溢出:隐藏；z-索引:1；高度:320px；宽度:480px；}

<iframe width="480" height="320" src="https://www.youtube.com/embed/aiegUzPX8Zc" frameborder="0"gesture="media" allow="encrypted-media" allowfullscreen><<;/iframe>

Please see this fiddle. Notice instantly before loading the border-radius works fine. A few milliseconds later the rounded corners disappear.

How can I add rounded corners to embedded YouTube videos?

解决方案

This is very simple using CSS3. All you guys are missing out is the z-index which is playing bad cop.

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!

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

这篇关于为嵌入的 YouTube 视频添加边界半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！