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 链接。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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

1 个答案: