Как добавить граничный радиус в встроенное видео YouTube?

Это то, что у меня есть до сих пор. Независимо от того, как я добавляю свойство border-radius, он не влияет.Как добавить граничный радиус в встроенное видео YouTube?

<div class="videotar_video"> 
    <iframe src="//www.youtube.com/embed/hqiNL4Hn04A" frameborder="0"></iframe> 
    </div> 

    .videotar_video 
    { 
     border: solid white; 
     border-top-width: 15px; 
     border-bottom-width: 15px; 
     border-left-width: 28px; 
     border-right-width: 28px; 
     position: relative; 
     padding-bottom: 56.25%; /* 16:9 */ 
     padding-top: 5px; 
     height: 0; 
    } 
    .videotar_video iframe 
    { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
    }

http://jsfiddle.net/FUBnc/

источник

2014-02-14 John Smith

'границы radius' работает на' .videotar_video' элемента. Но дело в том, что вы установили цвет границы на «белый». Вот почему вы не могли видеть эффект: http://jsfiddle.net/hashem/FUBnc/4/ –

вы спрашиваете, как добавить его во встроенное видео, или, как говорят все ответы; к границе вокруг нее? – Marcel

ОК, здесь: http://jsfiddle.net/FUBnc/6/ само видео не ограничено –

Использование пограничного радиуса в вашем CSS

.videotar_video 
    { 
border-radius:5px 5px 5px 5px; 
}

источник

2014-02-14 12:21:47 yashasvee

спасибо, я уже сделал это, но не имеет эффекта –

It works.videotar_video { border: solid red; border-top-width: 15px; border-bottom-width: 15px; border-left-width: 28px; border-right-width: 28px; \t позиция: относительная; \t прокладка-снизу: 56,25%;/* 16: 9 */ \t padding-top: 5px; \t высота: 0; border-radius: 10px 10px 10px 10px! Important; } – yashasvee

изменить цвет вашей границы на красный, вы можете увидеть изменение. – yashasvee

Вы можете сделать что-то вроде этого

.videotar_video 
{ 
border: 1px solid #000000; 
border-top-width: 15px; 
border-bottom-width: 15px; 
border-left-width: 28px; 
border-right-width: 28px; 
position: relative; 
padding-bottom: 56.25%; /* 16:9 */ 
padding-top: 5px; 
height: 0; 
marging: 10px; 
border-radius: 10px; 
background: #000000 
} 
.videotar_video iframe 
{ 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}

http://jsfiddle.net/4Vqp3/

источник

2014-02-14 12:26:20 melvas

eeek, позвольте мне подумать об этом, его немного обмануть :) –

Маленький, но красивый трюк.

iframe, 
object, 
embed{ 
    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;  
}

DEMO

источник

2014-10-28 08:21:03

Как добавить граничный радиус в встроенное видео YouTube?

ответ

Смежные вопросы