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

Question

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/

`border-radius` works on `.videotar_video` element. But the point is that you've set the color of the border to `white`. That's why you couldn't see the effect: http://jsfiddle.net/hashem/FUBnc/4/ — Hashem Qolami, Feb 14 '14 at 12:31
are you asking how to add it to the embedded video, or as all the answers suggest; to the border around it? — Marcel, Feb 14 '14 at 12:32
ok, here: http://jsfiddle.net/FUBnc/6/ the video itself isnt bordered — John Smith, Feb 14 '14 at 12:38
possible duplicate of [Adding border-radius for embedded YouTube video](http://stackoverflow.com/questions/7811719/adding-border-radius-for-embedded-youtube-video) — albert, Sep 23 '14 at 17:14

score 2 · Answer 1 · answered Feb 14 '14 at 12:26

2

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/

answered Feb 14 '14 at 12:26

melvas

2,346
25
29

eeek, let me think about it, its a little bit cheat :) – John Smith Feb 14 '14 at 12:35

score 1 · Answer 2 · answered Feb 14 '14 at 12:21

1

Use Border-radius in your css

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

answered Feb 14 '14 at 12:21

yashasvee

68
1
10

It works.videotar_video { border: solid red; 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; border-radius:10px 10px 10px 10px !important; } – yashasvee Feb 14 '14 at 12:26
change the color of your border to red you can see the change. – yashasvee Feb 14 '14 at 12:27

score 0 · Answer 3 · answered Oct 28 '14 at 08:21

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

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

3 Answers3