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

This is very simple using CSS3. All you guys are missing out is the z-index which is playing bad cop.

Look at the code below, I wrapped the player in a div, set it's height and width as I like, set overflow to hidden and z-index as required. Border radius works pretty awesome!

.player {
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  height: 320px;
  width: 480px;
}

<div class="player">
<iframe width="480" height="320" src="https://www.youtube.com/embed/aiegUzPX8Zc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>

Answer 2

You need to add this code into your css.

<style>
.div-round {
    overflow: hidden;
    position: relative;
    z-index: 10;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

.div-round::before {
    display: block;
    content: "";
}

.iframe-round {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    border: 0;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}
</style>

And, just apply those classes into your div and iframe individually.

<div class="div-round" style="width: 640px; height: 360px;">
    <iframe class="iframe-round" allow="autoplay; encrypted-media; fullscreen" src="https://www.youtube.com/embed/Xjs6fnpPWy4?modestbranding=1&autoplay=0"></iframe>
</div>

The final result should be displayed like this.

Answer 3

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)

Answer 4

If you are allowed to, try a direct embed/object (best with swfobject or something) and wmode = transparent or wmode opaque (preferred)

http://jsfiddle.net/AkPXj/19/

Answer 5

An example to get rounded corners on youtube videos or anything else, like iframes or img tags.

<div style="
width: 560px;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); /*ios 7 border-radius-bug */
-webkit-transform: rotate(0.000001deg); /*mac os 10.6 safari 5 border-radius-bug */
-webkit-border-radius: 10px; 
-moz-border-radius: 10px;
border-radius: 10px; 
overflow: hidden; 
">
<iframe width="560" height="315" src="http://www.youtube.com/embed/ZM0e1m9T9HQ" frameborder="0">
</iframe>
</div>