What would the right numbers to remove the black?
https://jsfiddle.net/h1xm26wn/1/
.wrap iframe {
position: absolute;
top: -3px;
left: -3px;
width: calc(100% + px);
height: calc(100% + px);
}
The video by itself, no border you are able to see 4px of color at the bottom.
https://jsfiddle.net/jvbhwda6/
Using this gives 2px of color at the bottom.
.wrap iframe {
position: absolute;
top: -3px;
left: -3px;
width: calc(100% + 6px);
height: calc(100% + 6px);
}
The vertical black that you see in the image shouldn’t be there.
The video should fill the whole screen inside its border.
To reproduce issue, play the video then resize it to different widths.
I don’t see any vertical black lines. The black line at the bottom is the video itself.
You will get the odd 1px rounding error but I don’t see a big gap anywhere.
Again the problem is that you are trying to insert a different type of setup in a design that was made for something else so you end up with a lot of stuff that probably isn’t needed for this demo.
e.g.
How would the rounding error be fixed?
And when you say rounding error, what part of the code are you referring to?
You can’ fix it. That’s the point.
When you resize the window then at odd pixels the width and the height of the video will not be a perfect aspect ratio as one or the other of the pixel measurements is rounded up or down.
In reality this makes no difference unless you are trying to match it to a specific background as you are trying to do.
If you look at my demo above I changed the background so that it was gray and therefore you don’t get the odd black line showing when a rounding error occurs
Here is my frame.
If the video is 1px out then you just see the gray so no one knows.
In your example you have black in the middle.
Therefore as soon as a rounding error occurs you see the black background showing.
Is this what you meant?
With my code I get 2 black lines:
With your code I see 1 vertical line.
You won’t see a black line with my code because there is no black. You didn’t post the code for that snippet so I can’t say what it is. In devtools set the iframe to opacity:0 and then you should see where the line is coming from (unless the line is part of the video itself).
Look here:
width="518" height="291"
https://jsfiddle.net/8p3fg7sr/
That’s where you can see the black line.
Click play and you will see it.
No I’m not seeing any black line in Chrome.
I’m not at home this week so don’t have any other browsers to test on. However as there is no black under the video then the black must be a part of the video itself and beyond our control I expect.
I can’t actually see that white screen with a red button that you keep position. All I get is the screenshot I keep posting.
Or this one for a brief second before it plays.
This is your code and I’m using Chrome.
All I did was change the width and height to where the black line shows.
width="518" height="291"
https://jsfiddle.net/8p3fg7sr/
Nope can’t see it on my mac. Must be better at resizing.
It’s the video itself from the looks of it so I doubt there’s anything you can do. Try looking at other resizable videos on youtube and see if they do the same on our machine.
I meant try it on their site to see if all responsive videos do that on your machine.
It doesn’t happen if there is no border around it.
Wait, let me investigate this further.
I found that the thin black lines appear on certain aspect ratios.
On here: width="518" height="291"
But not here: width=“640” height=“360”
Whether there is a border around it or not.
But never happens on youtube.
I wonder if they have presets for the ratios.
ytd-watch-flexy[flexy] {
--ytd-watch-flexy-width-ratio: 16;
--ytd-watch-flexy-height-ratio: 9;
Would object-fit; do anything?
The object-fit property in CSS
Maintain aspect ratio on images or video
I wasn’t able to figure out how it would be used in the code.
YouTube uses:
video {
object-fit: contain;
}
Would that be able to work in the code?
Would you be able to have YouTube work in here?
So you can see the difference with and without it added.
The html would need to be edited.
https://codepen.io/aarongarciah/pen/rrYQVY
Maybe it doesn’t work in Chrome, I didn’t see any difference at all.
In your code how come you have .position: relative; on .frame and not .frame-inner?
Shouldn’t it be on the first div that wraps around the video?
or no? or it doesn’t matter?
https://jsfiddle.net/9jeohmkp/
.frame {
position: relative;
width: 100%;
max-width: 640px;
border: 15px solid transparent;
border-radius: 12px;
box-shadow: 0 -1px white, 0 -1px 0 1px #bbb, 0 2px 0 1px #aaa,
0 2px 10px 1px rgb(0 0 0 / 20%);
overflow: hidden;
background: #bbb;
}
.frame-inner {
padding-top: 56.25%;
height: 0;
}
<div class="wrap">
<div class="frame">
<div class="frame-inner">
<iframe></iframe>
</div>
</div>
</div>
It doesn’t matter as they occupy the same space.
The contain value would likely make the video smaller but the cover value (object-fit:cover) may make it fill the area.
I also think the black is the background of the iframe showing through and it may help to explicitly make the background transparent.
e.g.
iframe {background:transparent;}
Or set it to the same colour as the background.
iframe {background:#bbb}
There is also the modern aspect ratio css property that could be used instead of the padding method.
However I don’t see any difference between the two on my browser and still expect this is a rounding issue that can’t be solved by normal means/
Actually I see all the youtube videos rounding slightly and a blurred edge showing. The youtube site doesn’t use iframes and I’ve no idea how they render their videos or what most of their custom html does. :). I think they have just coloured the background to mask the 1px rounding errors as I suggested above.
Youtube could even be monitoring the resize and adjusting the pixel measurements manually so that they always use the perfect 16:9 ratio. I do notice there is a noticeable delay on the youtube site when resizing.
You could also use an adaptive media query method and set the width and height of the video yourself to exactly 16:9 but you’d have to do it in jumps of say 100px otherwise you would need 640 media queries.
It all seems a lot of work for something that seems to happen on everybody’s site as far as I can tell.