youtube embedded video as iframe with border-radius

Question

I got a problem I absolutely don\'t understand. I got a website with YouTube video iframe and want to round the borders via CSS. On http://www.wunschpreisdeal.de/empfehlung/

Answer 1

To answer your question upfront, the difference between those two pages is the addition of wmode=transparent to the iframe address like so: http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent. That's a quick fix to get you going, but if you'd like to learn a bit more on the subject, then read on!

---

Unfortunately, rounding the corners of embedded videos such as YouTube and Vimeo is quite challenging due to the differences between older browsers. Even wrapping the iframe in an outer div and applying a border-radius and overflow: hidden to the wrapper, which works for most iframes, doesn't reliably do the trick!

Note: Ivijan-Stefan came up with an elegant solution below that works in most modern browsers, so if your site doesn't need to cater to legacy browsers like Internet Explorer 6 and 7, then feel free to use his implementation instead!

For those of us that need to support a variety of legacy browsers, the only consistently reliable way to do this is by making an image that looks like a curved corner, and using copies of this image to cover up each of the corners of the video. (Here's where we require the wmode=transparent trick that I described above, since some browsers will otherwise display the corner images under the video!)

Here is an example of this technique applied to an iframe-embedded YouTube video: http://jsfiddle.net/skywalkar/uyfR6/ (example radius = 20px)

Note: If you make the corner overlays too large (greater than ~20px), then they will cover up the player controls!
To minimize the effects of problem, you can try cutting the corners by rotating the images by 45 degrees. This requires a different set of overlays and some creative use of margins, but may be worth the trouble if you need larger corner radii: http://jsfiddle.net/skywalkar/BPnLh/ (example radius = 30px)

Answer 2

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