youtube嵌入视频播放时圆角

Question

我知道，还有一些其他问题，例如如何制作带有圆角的 youtube 嵌入视频和一些作品，但仅限于处于“未播放模式”时。 但在播放时（或播放后停止）它会失去圆角。

那么，如何在播放视频时也保持圆角？

CSS 代码（最初不是我的）：

<style>
 iframe,
 object,
 embed
 {
  border:5px solid rgb(255,255,255);
  border:5px solid rgba(255,255,255,0);
  -webkit-border-radius: 20px !important; 
  -ms-border-radius: 20px !important; 
  -o-border-radius: 20px !important; 
  border-radius: 20px !important;
 }
</style>

HTML 代码：

<iframe width="380" height="214" src="http://www.youtube.com/embed/vUuVYAYWy_Q?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Answer 1

JSFiddle link

Another technique using css transforms and rotates

youtube embedded video as iframe with border-radius

iframe {
   border:20px solid red; /*your border-color*/
   border-radius: 20px !important;
}

您可以看到的想法是在带有边框的 iframe 周围创建一个“包装器”。

要获得比这更小的边框，您应该将两个规则中的 20px 更改为相同的值。