以全宽嵌入 Vimeo 视频

Question

我在我的网站上嵌入了一个 vimeo 视频，如下所示：

<div class="fys-fp-content-wrapper">
<div id="fys-fp-video">
</div>
</div>

#fys-fp-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 600px;
}
#fys-fp-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
}

Vimeo iFrame 已加载到 #fys-fp-video 中。

然而，原始视频的宽度仅为 640 像素。我希望始终以 100% 的宽度显示视频，无论视频的某些内容是否是因为 600px 的高度，但重要的是它显示全宽度。

有人提示我如何才能实现这一目标吗？谢谢！

Answer 1

如果您使用引导程序，这很容易：

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

源 Bootstrap 4：https ://getbootstrap.com/docs/4.0/utilities/embed/

更新 Bootstrap 5： https ://getbootstrap.com/docs/5.0/helpers/ratio/#example

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>