从视频中删除填充

Question

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

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

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

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, 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>

Answer 1

问题在于您在 padding-top 周围使用的边框和 iframe。我猜视频的比例为 16:9，这需要 padding-top 为 56.25，但您使用了 58.208 来补偿您使用的边框。边框出现在元素的宽度内，因此它会影响内部内容的可用空间（因此会影响 16:9 比率/56.25%）。要修复您需要跳过边框并使用 box-shadow 并将 padding-top 设置为 56.25%。