Bootstrap: 1px black line when .embed-responsive-16by9 used with YouTube video

[spacecat]

Is this a random number, 56.25%? Or what is it based on? Because the container div for a youtube iframe is 1 px too heigh (in desktop mode - havent tried other devices) thus revealing youtubes black background with 1 px. Setting it to 56.10% shrinks the container div in height but I don't know what other effects this will have?

Is this a known issue? Will/can it be fixed? Or is it by design? Can someone please clarify with some more details?

[kkirsche]

(9 / 16) * 100 = 56.25%

[spacecat]

Oh, I see. What about the other questions and in particular the 1px issue I'm experiencing?

[cvrebert]

Please post a JS Bin, JS Fiddle, Plunker, or other live example that demonstrates the problem.
Also, in which browser(s) have you observed the problem?

[twbs-closer]

Hey there!

We're automatically closing this issue since the original poster (or another commenter) hasn't yet responded to the question or request made to them 14 days ago. We therefore assume that the user has lost interest or resolved the problem on their own. Closed issues that remain inactive for a long period may get automatically locked.

Don't worry though; if this is in error, let us know with a comment and we'll be happy to reopen the issue.

Thanks!

(_Please note that this is an automated comment._)

[rodrigograca31]

I'm also experiencing this issue....
Changing it from 56.25% to 56.30% solved the problem ....

As far as I can tell there was no problems on other sizes/resolutions, but ..........

[cvrebert]

@rodrigograca31 Please post a live testcase that demonstrates the problem.

[gabn88]

Same issue, it seems the embed doesn't like double digits or so..

[cvrebert]

@gabn88 Please post a live testcase that demonstrates the problem. We won't be able to help you otherwise.

[dreamtheme]

I have the same problem but i found out the solution!

I have to say, i don't think its bootstrap problem but its browser calculation problem, but bootstrap can include hack-fix.

I have placed videos at 3 places on a website and it is the same video with the same code, however its seems that calculation made by the browser is not exact and its rounding to different numbers so it always looked different and appeared black lines depending on the div size and so it occurred at different sides of the div, it may be left, or right or bottom, and the worst part is, even if you fix it for Chrome it occur at Firefox because the calculation is different...

The solution is this:

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
    position: absolute; 
    top: -1px; 
    left: -1px;
    right -1px;
    bottom: -1px;
    width: calc(100% + 3px); 
    height: calc(100% + 3px);
}

How to reproduce the issue:

1. Make a video with white background and white preview image.
2. Place the code in website with white background, place it several places with different div sizes.
   Occur on Chrome and Firefox as i tested.

[apiening]

@dreamtheme Unfortunately your solution does not work for me.
I might have to add, that I experience this issue only with Firefox (59.0.2).
Both Google Chrome and Apple Safari does not show the 1px black line at the bottom.

Please take a look at this very simple markup and compare it between Firefox and Chrome for example: https://www.bootply.com/IBqa3KimQL