cssmaterial-uilinethinborder-radius

Iframe on applying border radius have thin curve lines on the 4 corners

I am using material UI's CardMedia component to render an Iframe where I have embedded a youtube link. I want the iframe to have rounded corners so I have set the border-radius to 30px. It's working, but the problem is that it also brings some thin lines on all four edges like the image below.

enter image description here

I have set border-width to 0. I tried making the border color to white or transparent but nothing works. Something iframe brings it in while I am applying border radius. It is mostly noted on Windows-based Browsers. However, it is not there in Mac's Chrome and Safari, other than that Firefox have this issue.

I am applying the styles to the CardMedia component via the sx prop. Here is my current code for it:

cardContainer: {
    height: '360px',
    maxWidth: '640px',
    borderRadius: '30px',
    webkitBorderRadius: '30px',
    mozBorderRadius: '30px',
    borderWidth: '0',
}

Here is a JS Fiddle with a live example on a white video: skip about a minute in the embedded video and check the edges. JS Fiddle Link

If you don't want to open up any external links, below is the code sample for you guys. 

.custom {
    height: 360px;
    width: 640px;
    border-radius: 30px;
    border-width: 0;
}
<!DOCTYPE html>
<html>
<body>

<h1>The iframe element</h1>

<iframe class="custom" src="https://www.youtube.com/embed/OtVUZGhAHBc" title="lines on Iframe curves">
</iframe>

</body>
</html>

Solution

  • Issue:

    The reason behind the curve lines looks to be some default styling from youtube combined with some very small spacing left by the browser. If you inspect the iframe you find that inside your iframe you have the following styling:

    body {
  ...
  background-color: #000;
  ...
}

    and

    .html5-video-player:not(.ytp-transparent), .html5-video-player.unstarted-mode, .html5-video-player.ad-showing, .html5-video-player.ended-mode, .html5-video-player.ytp-fullscreen {
  background-color: #000;
}

    This 2 black backgrounds are basically the thin curve lines on the 4 corners. If you search and remove them from the browser inspector the lines will disappear.

    However I am afraid there isn't a simple solution to this since you can't edit the iframe styling anymore (an related question would be this one), and youtube somehow renders it's body just on the visible side of your container always. And if you have border radius this will result in the same outcome -> including if you load a bigger container inside a smaller one like this:

    .custom-wrapper {
    width: 635px;
    height: 355px;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    margin: 20px
}
.custom {
    width: 655px;
    height: 375px;
    position: absolute;
    top: -10px;
    left: -10px;
    overflow: visible
}
.custom iframe {
  width: 100%;
  height: 100%;
}
    <h1>The iframe element</h1>


<div class="custom-wrapper">
<div class="custom">

<iframe src="https://www.youtube.com/embed/OtVUZGhAHBc" title="lines on Iframe curves">
</iframe>
</div>
</div>

    Solution / Alternative option:

    What you can try to do instead if creating an artificial border radius which won't affect how the iframe is loaded. Something like:

    .custom {
  margin: 20px;
  height: 360px;
  width: 640px;
  position: relative;
}

.custom::before {
  content: "";
  position: absolute;
  border-radius: 50px;
  padding: 20px;
  background: linear-gradient(45deg, #fff, #fff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: add, add;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  inset: -15px;
  z-index: 999;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  pointer-events: none;
}
    <h1>The iframe element</h1>
<div class="custom">
  <iframe width="640px" height="360px" src="https://www.youtube.com/embed/OtVUZGhAHBc" title="lines on Iframe curves">
  </iframe>
  <div class="white-bg"></div>
</div>

    Explanation:

    Basically we added a container for the iframe (positioned relative) and inside it also added a :before element which will act like the border radius we want.

    You can read more about the artificial border radius approach here but basically what this does is:

    1. From the link:

    2. Extra:

    PS: You might want to play a little with this values since they might not be perfect, but the look pretty close to your requirements. Basically if you make the width and height bigger it would trim more but in this case you need to reposition the :before element. If you get any lines you don't want on the edges just make the container smaller or move it slightly so the :before elements covers them.