Adding Border-Radius for Embedded Youtube Video

4 rounded corners on YouTube video iframe

Set the .youTubeContainer to inline-flex to remove the small amount of white-space that is preventing the corners from properly sticking.

jsFiddle

youtube embeded video rounded corners when playing

JSFiddle link

Another technique using css transforms and rotates

youtube embedded video as iframe with border-radius

iframe {
   border:20px solid red; /*your border-color*/
   border-radius: 20px !important;
}

The idea as you can see is in creating a "wrapper" around the iframe with the border.

To get a border smaller than this, you shall change 20px in both rules to same value.

youtube iframe border radius removed when video start

You can wrap it and hide the overflow.

Your issue with the video's iframe ignoring the wrapper/container's border-radius on play is from a couple factors, like z-index and positioning to name a couple.

Here's the CSS that I used to create it.

.bord-rad-yt-container{
  margin:0 auto;
  border:1px solid blue;
  padding:0;
  display:inline-block;
  overflow:hidden;
  border-radius:25%;
  z-index:2;
  position:relative;
}

I've also taken the liberty of providing an example that compares the two, side-by-side.

http://codepen.io/anon/pen/ZObPGX

CSS adding border radius to an IFrame

Border radius isn't well supported or consistent yet. If you want the desired affect, try using DIV's around the element and use graphics instead, with an overflow of hidden in your CSS. You might want to look into the sliding doors tehnique if your iframe varies in height.

http://www.alistapart.com/articles/slidingdoors/

Hope this helps.

Good luck!

How to have border radius in flutter video player?

I got the result using ClipRRect. Just wrapped the video player with ClipRRect with some radius and it worked fine.

    ClipRRect(
        borderRadius: BorderRadius.circular(15),
        child: VideoPlayer(_controller)
     )

---

Related Topics