Remove thin black lines from YouTube video

htmlcssjavascript543 · August 1, 2021, 10:16pm

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?

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/qvoghk1y/2/

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>

Stan · August 2, 2021, 11:29am

hi @htmlcssjavascript543 your major problem is with fixed max-width: 511px while using 56.25% for keeping video ratio the black “lines” is actually background color revealed behind the video. When you change max-width to eg. 60% video fill out whole space. Another thing is that using table it not ideal, just use block element instead and all will work as expected.