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

我认为你要找的是vw（视口宽度）。 width:100%表示父级的100％宽度。 width:100vw表示100％的屏幕。我建议你这样做：

#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: 100vw;
    height: 600px;
}

Answer 2

如果您使用引导程序，那很简单：

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

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="embed-responsive embed-responsive-16by9">
  <iframe lass="embed-responsive-item" src="https://player.vimeo.com/video/54596361" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>

全方位嵌入Vimeo视频

2 个答案: