youtube вставлял видео закругленные углы во время игры

Question

Я знаю, есть некоторые другие вопросы, такие как , как сделать youtube встроенным видео с закругленными углами, а некоторые работают, но только когда он находится в «неиграемом режиме». НО при игре (или stoppd после игры) он теряет закругленные углы.

Итак, как сохранить закругленные углы также во время воспроизведения видео?

CSS код (не мое изначально):

<style> 
iframe, 
object, 
embed 
{ 
    border:5px solid rgb(255,255,255); 
    border:5px solid rgba(255,255,255,0); 
    -webkit-border-radius: 20px !important; 
    -ms-border-radius: 20px !important; 
    -o-border-radius: 20px !important; 
    border-radius: 20px !important; 
} 
</style> 

HTML код:

<iframe width="380" height="214" src="http://www.youtube.com/embed/vUuVYAYWy_Q?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> 

Answer 1

JSFiddle link

Another technique using css transforms and rotates

youtube embedded video as iframe with border-radius

iframe { 
    border:20px solid red; /*your border-color*/ 
    border-radius: 20px !important; 
} 

Идея, которую вы видите, заключается в создании «обертки» вокруг iframe с границей.

Чтобы получить границу, меньшую, чем это, вы должны изменить 20px в обоих правилах на одно значение.