您在视频左侧和右侧的图像中看到的垂直黑色不应该存在。

当更改为不同的宽度时，视频应在其边框内填满整个屏幕。

要重现问题，请播放视频，然后将其调整为不同的宽度。

https://jsfiddle.net/m3w6Lp70/

css 会调整什么？

如何让 YouTube 视频填满整个屏幕？

这就是我想弄清楚的全部内容。

有人知道怎么做吗？

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: 670px;
  margin: auto;
}

.curtain-ratio-keeper {
  position: relative;
  padding-top: 58.208%;
}

.curtain {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  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;
  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;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hide {
  display: none;
}

<div class="outer">
  <div class="tcell">
    <div class="curtain-wrapper">
      <div class="curtain-ratio-keeper">
        <div class="curtain">

          <div class="wrap ">
            <div class="video video-frame"></div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>