YouTube IFrame границы удаляется при запуске

Question

я использую Вставить код из YouTube видео и дать ему CSS радиус границы:

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

IFrame получить радиус границы, но после того, как я нажал на старт видео, углы сменился на квадрат.

Как я могу заставить iframe получить радиус границы?

Я нашел еще одно сообщение: youtube embedded video as iframe with border-radius , но это не поможет мне.

добавить два изображения, чтобы объяснить, на мой вопрос:

Answer 1

Вы можете обернуть его и скрыть переполнения.

Ваша проблема с iframe видео, игнорируя граничный радиус оболочки/контейнера при игре, состоит из пары факторов, таких как z-индекс и позиционирование, чтобы назвать пару.

Вот CSS, который я использовал для его создания.

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

Я также взял на себя смелость предоставить пример, который сравнивает два, бок о бок.

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