Search code examples
htmliframerounded-corners

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

I recently noticed a problem with Google Chrome: iframes with rounded corners lose them after hitting play.

Check this fiddle I got from another answer in this site.

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

Click on play and you'll notice how the rounded borders return to normal. This doesn't happen with Edge or Firefox. Is there a way to fix this?

Solution

  • I found out the answer: use this property in the div witht he wrapper class in my code:

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

    Hope this helps other people too.