youtube iframe border radius removed when video start

Question

I'm using Embed code from youtube and give it CSS to border radius:

.iframe {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

the iframe get border radius but after I clicked on start the video, the corners changed back to by squared.

How can I force the iframe to get border radius?

I found another post: youtube embedded video as iframe with border-radius but it's not help to me.

I add two images to explain my question:

Possible duplicate of youtube embedded video as iframe with border-radius — Roy
Have you tried DOM inspection to understand what exactly happens? — YakovL

MassDebates MassDebates · Accepted Answer · 2016-06-08T13:10:59

You can wrap it and hide the overflow.

Your issue with the video's iframe ignoring the wrapper/container's border-radius on play is from a couple factors, like z-index and positioning to name a couple.

Here's the CSS that I used to create it.

.bord-rad-yt-container{
  margin:0 auto;
  border:1px solid blue;
  padding:0;
  display:inline-block;
  overflow:hidden;
  border-radius:25%;
  z-index:2;
  position:relative;
}

I've also taken the liberty of providing an example that compares the two, side-by-side.

http://codepen.io/anon/pen/ZObPGX

youtube iframe border radius removed when video start

1 Answers