user16466354
user16466354

Reputation:

Remove thin black lines from YouTube video

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/

enter image description here

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

Answers (2)

Rob Moll
Rob Moll

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);
}

FIDDLE

Upvotes: 1

Nabil Akhlaque
Nabil Akhlaque

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%;
}

enter image description here

Upvotes: 0

Related Questions