Concern:
The issue with the curved lines appears to be caused by default styling from YouTube in combination with minimal spacing left by the browser. Upon inspecting the iframe, it can be observed that the following styles are present:
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;
}
These two black backgrounds essentially manifest as faint curved lines on the corners. Removing them using the browser inspector eliminates the lines.
Unfortunately, there is no straightforward solution to this problem since editing the iframe styling is not feasible anymore (a related query would be found here). Additionally, YouTube consistently renders its body just on the visible side of your container, which results in the same outcome if there is a border radius or if a larger container is loaded into a smaller one like in this scenario:
.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 approach:
An alternative option to consider is creating an artificial border radius that does not affect how the iframe loads. This involves:
.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:
This method involves adding a container for the iframe (positioned relative) and inserting a :before element within it to simulate the desired border radius effect.
Detailed information about the artificial border radius technique can be found here. In essence, this approach achieves the following:
1. As mentioned in the source:
- Utilizing a gradient background with the origin set to the border box instead of the padding box.
- Applying two opaque layers using the mask property, where the bottom layer covers the entire element and the top layer only covers the padding box (excluding the border area).
- Excluding the top layer from the bottom layer to display only the border area.
- Providing compatibility for browsers that do not fully support mask-composite through prefixes.
2. Additional notes:
- Adjusting the
border-radius: 50px to create rounded corners, even though the desired value may differ from the actual border radius value.
- Setting a high
z-index: 999 for proper positioning over the iframe, alongside utilizing pointer-events: none; to allow clicking on the iframe itself.
- Changing colors for the background and gradient to white (#fff) to match existing backgrounds.
- Increasing padding to 20px for better corner concealment.
Note: These values can be fine-tuned based on individual requirements. Adjustments may include altering dimensions, repositioning elements, or experimenting with color schemes to achieve the desired look while eliminating unwanted lines around the edges.