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

Unfortunately, rounding the corners of embedded Flash videos such as YouTube and Vimeo is quite challenging due to the differences between older browsers.

If all of your end users are running a browser that supports HTML5, then just add player=html5 to the iframe address like so: http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&player=html5. This will force their browser to load the HTML5 version of the video, and the border-radius will work just fine.

---

If some of your end users' browsers don't support HTML5, then things start to get ugly.

Your next-most elegant solution will be something like what Ivijan-Stefan suggested, which is to address each browser individually and throw the !important tag on each element, possibly supplemented by adding wmode=transparent to the iframe address like so: http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent.

This will buy you a few extra browser versions' worth of compatibility, so you might be able to call it quits at this point.

---

For those of us that need to support a variety of legacy browsers (Internet Explorer 6, anyone?), however, 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. (This also requires the wmode=transparent trick that I described above, since some of the worst offenders 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 this 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)