Reputation:
How are these think black lines removed from YouTube videos?
I have looked everywhere and can't figure out how to remove the thin black lines.
Does anyone know how to do this?
It's asking me to provide more info, but that's all.
You click play, and those black lines are right there and never go away.
That's all I am trying to do.
How do you make sure those thin black lines never appear at all?
Is there a way to do this?
https://jsfiddle.net/nhmg49vy/
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
width: 100%;
overflow: hidden;
}
.tcell {
display: table-cell;
vertical-align: middle;
padding: 8px 8px;
}
.curtain-wrapper {
min-width: 40%;
max-width: 511px;
margin: auto;
border: 15px solid transparent;
border-radius: 12px;
background: #333;
background: linear-gradient(to bottom right, gray, black), url("https://i.imgur.com/pwdit9N.png"), linear-gradient(to bottom right, #eee, #ccc);
background-origin: padding-box, border-box, border-box;
background-clip: padding-box, border-box, border-box;
box-shadow: 1px 1px 3px black inset, 0 -1px white, 0 -1px 0 1px #bbb, 0 2px 0 1px #aaa, 0 2px 10px 1px rgb(0 0 0 / 20%);
overflow: hidden;
}
.curtain-ratio-keeper {
position: relative;
padding-top: 56.25%;
}
.curtain {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #333;
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="outer">
<div class="tcell">
<div class="curtain-wrapper">
<div class="curtain-ratio-keeper">
<div class="curtain">
<div class="video video-frame"></div>
</div>
</div>
</div>
</div>
</div>
Upvotes: 1
Views: 1006
Reputation: 3463
I got there by increasing the video size by 2 px and centering by adjusting top
and left
by 1px:
.video-frame {
position: absolute;
top: -1px;
left: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
}
Upvotes: 1
Reputation: 356
I don't know where you got "56.25%". According to Youtube documentation it should be "56.20%". Try changing .curtain-ratio-keeper to this:
.curtain-ratio-keeper {
position: relative;
padding-top: 56.20%;
}
Upvotes: 0