在 Chrome 中点击播放后如何保持 iframe 的圆角

Question

我最近注意到 Google Chrome 的一个问题：具有圆角的 iframe 在点击播放后会丢失。

检查这个 fiddle 我从这个网站的另一个答案中得到的。

.wrapper         {width:80%; max-width: 600px; height:100%; margin:0 auto; background:#CCC}
.h_iframe        {position:relative; padding-top: 56%;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}


iframe{
  border: 1px sold black;
  border-radius:50px;
}

<div class="wrapper">
    <div class="h_iframe">
        <iframe height="400" width="2" src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
    </div>
    <p>Please scale the "result" window to notice the effect.</p>
</div>

点击播放，您会注意到圆形边框 return 是如何正常的。 Edge 或 Firefox 不会发生这种情况。有办法解决这个问题吗？

Answer 1

我找到了答案：在 div 中使用此属性并在我的代码中使用包装器 class：

-webkit-mask-image:-webkit-radial-gradient(white, black);

希望这对其他人也有帮助。

在 Chrome 中点击播放后如何保持 iframe 的圆角

How do I keep the rounded corners of an iframe after hitting play in Chrome

html

iframe

rounded-corners