Chromeで再生した後にiframeの丸みを帯びた角を維持するには

Question

最近、Google Chromeで問題が発生しています：角を丸めたiframeは、

私はこのサイトで別の答えを得ました。

.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>

プレーをクリックすると、丸みを帯びたボーダーが正常に戻るかわかります。これはEdgeやFirefoxでは起こりません。これを修正する方法はありますか？

Answer 1

私は答えを見つけた：

-webkit-マスク画像：：私のコードでは、クラスラッパー彼withtのdivでこのプロパティを使用し-webkit-放射状グラデーション（白、黒）。

これは他の人にも役立ちます。