-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
1px black line with .embed-responsive-16by9 and YouTube video in Firefox #26284
Comments
Tested at various screen sizes, seems more like an aliasing issue on the video itself and not an actual border from no where. |
I think it's something unrelated to Bootstrap. Just zoom in or zoom out; the black line goes away. EDIT: On the other hand, changing Something weird is going on with the math the browser is doing. I also see the 1px line to the right under some resolutions. |
browsers often do inappropriate up/down rounding, unfortunately. may be worth trying adding a -1px negative margin to cover it up? |
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... |
@XhmikosR Yes you're right: When I resize the window, every now and then the black bar shows up even in Chrome. |
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. |
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.
|
This issue also happens to me using Safari 11.1, but the solution that @patrickgrey wrote is neither working for me. |
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. |
@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. |
As @ovpv said, that issue belongs to youtube's ( |
Closing since it's not an issue with our CSS. |
The @patrickgrey solutions works fine in youtube iframes. |
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).
The text was updated successfully, but these errors were encountered: