Adding border-radius for embedded YouTube video

Question

Please see this fiddle. Notice instantly before loading the border-radius works fine. A few milliseconds later the rounded corners disappear.

How can I

Answer 1

Here's an easy yet very practical and useful "hack-solution" to this challenging problem.

Just embed your iframe in a "div" element like this:

  <div>
   <iframe allowfullscreen="" frameborder="0" height="445" player="html5"scrolling="no" src="https://www.youtube.com/embed/DCTwJJhQFy8"   width="780"></iframe>
  </div>

then add the following css to your HTML:

 div {
   position: relative;
   display:inline-block;
   margin:200px;
}
div:before {
    content: '';
    position: absolute;
    z-index: 5000;
    display: block;
    top: -27px;
    left: -27px;
    right: -27px;
    bottom: -27px;
    background-color: transparent;
    pointer-events: none;
    border: 30px solid white;
    border-radius: 50px;
}][1]

This is quite a flexible solution, though it uses some additional layer for border-radius. This method is also compatible with most (all) modern browsers. Hope it was useful.

Answer 2

In order to create the look of rounded corners, you would have to make four overlay divs that look like a rounded corner and position them at each corner. Not an elegant solution at all, but it's the only way to create that effect.

Answer 3

At first the browser treats it like any other block element and applies the border radius. Then the flash object finishes loading and just goes over the top, as there is no way to use border radius on a flash object, they disappear.

Answer 4

It's only possible with HTML5 mode turned on for youtube player.

Demo here: http://jsfiddle.net/3f9DB/1/

Answer 5

You just have to set your border styles:

border:20px solid #000;

http://jsfiddle.net/jalbertbowdenii/AkPXj/20/

Answer 6

You can wrap the iframe like this: http://jsfiddle.net/xmarcos/D4sS7/