制作比例vimeo iframe

Question

我迈出了学习编码的第一步。我已经上过一些关于互联网的课程，现在我想继续学习这个经验，而我自己也建立了一个Wordpress儿童主题。

问题是我在一个模板中使用了vimeo iframe。

＆＃13;

＆＃13;

iframe {

	width:70%;
}

＆＃13;

<iframe src="https://player.vimeo.com/video/41845276" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

＆＃13;

＆＃13;

＆＃13;

我喜欢它，它工作正常，但我想按比例调整它并且周围没有很多黑色空间。试着总是有这样的东西

而不是这样：

例如我在我的iphone中看到这样的情况并不是很好，因为它几乎占据了我的所有屏幕：

你有什么建议吗？

非常感谢您的帮助

Answer 1

试试这个，如果您知道视频的实际比例，例如16:9或4:3，您可以使用视口单位来设置尺寸。像这样：

  

16：9
70vw x 39vw

＆＃13;

＆＃13;

iframe {
  display:block;
  margin:0 auto;
  width:70vw;
  height:39vw;
}

＆＃13;

<iframe src="https://player.vimeo.com/video/41845276" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我经常做的是在图像标签中加载拇指或预览图像，我可以将其放在视频后面。因此外部div选择预览图像的比例，这应该是视频的比例。视频的宽度和高度均为100％。这样比例应始终匹配。

Answer 3

你必须将iframe包装在一个div中并给它一个纵横比的填充顶部。您可以使用CSS calc函数或预先计算它（56.25％）。

HTML

<div class="embed embed-16-9">
    <iframe src="https://player.vimeo.com/video/41845276" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

CSS

.embed {
  height: 0;
  padding-top: 100%;
  position: relative;
}

.embed--16-9 {
  padding-top: calc(100% / (16 / 9));
}

.embed iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}