全宽（固定高度）响应youtube嵌入横幅

Question

我发现以下codepen根据宽高比调整/缩放嵌入式YouTube视频作为背景图层。

https://codepen.io/dudleystorey/pen/PZyMrd

下面的行似乎根据宽高比处理视频的变化

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}

如果我想将视频设置为背景，则调整大小/缩放效果非常有效，但是，我希望视频在div内响应缩放（而不是作为背景）

请看下面的小提琴，以了解我的意思。

https://jsfiddle.net/mhgsre0z/2/

我的问题是我不能像在codepen中那样根据宽高比来缩放视频（缩放？）。因此，在视频的两侧产生黑条垂直条，宽度更宽

欢迎任何帮助，

谢谢！

编辑：

这是我提出的一个解决方案，在断点处略有跳跃我测试了不同的高度/宽度值，以尝试减少跳跃的剧烈程度。

https://jsfiddle.net/84jyv3uo/

Answer 1

你是这个意思吗。视频不在SO片段上播放，所以这里也是JSFiddle链接。

.content {
  max-width: 100% height: auto;
  text-align: center;
}

.header-unit {
  height: auto;
  position: relative;
  padding: 0;
}

#video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
  border-bottom: solid 2px blue;
  border-top: solid 2px blue;
}

#video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="content">
  <h1>
    Content above the video banner
  </h1>
  <p>
    I would like to have content above and below an embedded youtube video that rescales/resizes responsively eliminating the black bars at certain aspect ratios by scaling
  </p>
</div>

<div class="header-unit">
  <div id="video-container">
    <iframe class="fillWidth" src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

<div class="content">
  <h1>
    Content below the video banner
  </h1>
  <p>
    I would like to have content above and below an embedded youtube video that rescales/resizes responsively eliminating the black bars at certain aspect ratios by scaling
  </p>
</div>