John Smith
John Smith

Reputation: 6197

How to add border-radius to an embedded youtube video?

This is what I have so far. No matter how I add the border-radius property, it has no effect.

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

Upvotes: 1

Views: 2979

Answers (3)

Ivijan Stefan Stipić
Ivijan Stefan Stipić

Reputation: 6678

Small but beautiful trick.

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

Upvotes: 0

melvas
melvas

Reputation: 2356

You can do something like this

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

Upvotes: 2

yashasvee
yashasvee

Reputation: 68

Use Border-radius in your css

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

Upvotes: 1

Related Questions