Question

这是我到目前为止所拥有的。无论我如何添加border-radius属性，它都没有效果。

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

Answer 1

你可以做这样的事情

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

Answer 2

在css中使用Border-radius

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

Answer 3

小而精美的技巧。

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

如何将border-radius添加到嵌入式YouTube视频？

3 个答案: