Bootstrap: 1px black line with .embed-responsive-16by9 and YouTube video in Firefox

[apiening]

Since the original issue #18261 was closed without a solution, I created a new one.

Please take a look at this very simple markup using the full screen preview in Firefox: https://www.bootply.com/IBqa3KimQL

At the bottom of the YouTube video is a black line with 1 pixel.
This is especially annoying on a white background page and a white video.
The black line does not show up with Google Chrome or Apple Safari. I have this issue only with Firefox (version 59.0.2 here).

[Chaosxmk]

Tested at various screen sizes, seems more like an aliasing issue on the video itself and not an actual border from no where.

[XhmikosR]

I think it's something unrelated to Bootstrap.

Just zoom in or zoom out; the black line goes away.

EDIT:
And I can see the same line after playing around with zoom in / out on Chrome too.

On the other hand, changing .embed-responsive-16by9::before padding-top to 56.20% - 56.22% fixes the problem for me.

Something weird is going on with the math the browser is doing. I also see the 1px line to the right under some resolutions.

[patrickhlauke]

browsers often do inappropriate up/down rounding, unfortunately. may be worth trying adding a -1px negative margin to cover it up?

[XhmikosR]

That was my idea too, @patrickhlauke. But then I noticed that with 21by9 there's a 1px black line to the right this time, after zooming in/out.

Not sure we can make this right for all cases...

[apiening]

@XhmikosR Yes you're right: When I resize the window, every now and then the black bar shows up even in Chrome.
I understand that the fractional part of the percentage value might cause different results in different browsers.
One of my customers complained that the black line is on the videos. It might get tricky to explain why it is probably not possible to remove it.
One solution would be to change the background-color of the youtube iframe to the color of the page. A white 1 px line at the bottom wouldn't be noticeable on a white page.
Unfortunately it looks like there is no option to add custom styling to the youtube iframe embed url.

[XhmikosR]

I don't think the border fixes the issue. What really fixes it is changing the padding. But I can't find a number that works in all cases from a quick look...

PRs welcome as always.

[patrickgrey]

In my responsive container div, I added clip-path: inset(1px 1px); Works for newer browsers except Edge. Only solution I have come up with to remove the black lines from the thumbnail.

.embed-container iframe, .embed-container object, .embed-container embed
{ 
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: inset(1px 1px);
}

[LuisMiguelSS]

This issue also happens to me using _Safari 11.1_, but the solution that @patrickgrey wrote is neither working for me.
Also it adds another 1px line on top of the video -less remarkable- (both _Firefox 60.0.1_ and _Safari 11.1_). Notice the padding you can see on the bottom screenshot has been inserted by me.
Bottom screenshot:

Top screenshot:

[ovpv]

hello @apiening @LuisMiguelSS ,

After looking into your issue, I found out that the border that you are seeing is actually the background color of your youtube content.

Look at the following screenshot:

I dont think its an issue with .embed-responsive-16by9. That background is added by the youtube content structure.

[MartijnCuppens]

@ovpv is right.

I don't think we shouldn't change something here, tweaking the percentage or using clipping hacks only for youtube iframes just doesn't feel right and will cause more issues in other situations.

[RK-developer]

As @ovpv said, that issue belongs to youtube's (iframe> body {background-color: #000}).
So we can solve this issue by applying this style ( margin-top:-1px ) to the selector either .embed-responsive-16by9 or .embed-responsive-item.

[XhmikosR]

Closing since it's not an issue with our CSS.

[espaistelematics]

The @patrickgrey solutions works fine in youtube iframes.
Thanks patrick