从视频中删除填充

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

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