CODEWITHSUNDEEP
cssyoutube
Randomblue
Randomblue

Reputation: 116303

Adding border-radius for embedded YouTube video

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

How can I add rounded corners to embedded YouTube videos?

Upvotes: 24

Views: 61642

Answers (11)

albert
albert

Reputation: 8153

You just have to set your border: styles:

border:20px solid #000;

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

Upvotes: 15

Minki Ju
Minki Ju

Reputation: 33

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.

Sample Image

Upvotes: 3

Sibidharan
Sibidharan

Reputation: 2756

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>

Upvotes: 23

user6123836
user6123836

Reputation: 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.

Upvotes: 0

RobotZombi
RobotZombi

Reputation: 188

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)

Upvotes: 2

dirkdigital
dirkdigital

Reputation: 61

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>

Upvotes: 6

xmarcos
xmarcos

Reputation: 3368

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

Upvotes: 0

yunzen
yunzen

Reputation: 33439

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/

Upvotes: 3

user1012851
user1012851

Reputation:

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

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

Upvotes: 0

Nate B
Nate B

Reputation: 6356

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.

Upvotes: 4

472084
472084

Reputation: 17895

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.

Upvotes: 3

Related Questions