css - 播放时youtube嵌入视频圆 Angular

Question

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

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

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 更改为相同的值。