Question

我知道，还有其他一些问题，比如如何制作带有圆角的youtube嵌入式视频以及一些作品，但只有当它处于＆＃34;未播放模式＆＃34;时。 但是在播放时（或播放后的stoppd）它会丢失圆角。

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

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 code：

<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;
}

您可以看到的想法是创建一个＆＃34;包装器＆＃34;围绕iframe的边框。

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

youtube嵌入式视频播放时圆角

1 个答案: