html - 制作成比例的vimeo iframe

Question

我正在迈出学习编码的第一步。我已经在 Internet 上学习了一些类(class)，现在我决定在自己构建 Wordpress 子主题的同时继续从经验中学习。

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

iframe {

	width:70%;
}

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

我喜欢它，它工作正常，但我希望可以按比例调整它的大小并且周围没有很多黑色空间。尝试总是拥有这样的东西

不是这样的:

例如，我在我的 iPhone 上看到它是这样的，但效果不是很好，因为它几乎占据了我的整个屏幕:

你有什么建议吗？

非常感谢您的帮助

Answer 1

试试这个，如果您知道视频的真实比例，例如 16:9 或 4:3，您可以使用视口(viewport)单位来设置大小。像这样:

16 : 9
70vw x 39vw

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

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