播放时youtube嵌入视频圆角

Question

我知道，还有一些其他问题，例如 如何制作带圆角的 youtube 嵌入视频 和一些作品，但只有在 "not-played mode" 中。 但是在播放时（或播放后停止）它失去了圆角。

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

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&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 周围创建 "wrapper"。

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

播放时youtube嵌入视频圆角

youtube embeded video rounded corners when playing

css

youtube

rounded-corners