如何调整 iframe youtube 视频的界面大小？答案

【问题标题】：How can i resize the interface of the iframe youtube video?如何调整 iframe youtube 视频的界面大小？
【发布时间】：2020-01-04 20:49:54
【问题描述】：

我正在制作我的第一个网络应用程序并尝试在其上放置一些带有 youtube 视频的 iframe，问题是，当我从 youtube 粘贴嵌入代码时，它太大以至于占用了整个屏幕，所以我调整了它的大小。但是现在界面对于尺寸来说太大了，看起来很糟糕。如何使界面适应大小？ pic related

谢谢。

【问题讨论】：

标签： html css iframe visual-studio-code resize

【解决方案1】：

您必须使用响应式样式。为此，您需要一个额外的 div 作为包装器。使用下一个 html 和 css，youtube 将与可用空间一样宽（在这个 css 中占可用空间的 90%）。当然，宽度和高度都会调整大小以保持 youtube 电影的 16:9 比例。

<style>
.yt {
  position: relative;
  display: block;
  width: 90%; /* width of iframe wrapper */
  height: 0;
  margin: auto;
  padding: 0% 0% 56.25%; /* 16:9 ratio */
  overflow: hidden;
}
.yt iframe {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

<div class="yt">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/8Pa9x9fZBtY" allowfullscreen></iframe>
</div>

【讨论】：

【解决方案2】：

你可以，但它在父容器中，它将控制它的大小并使你的 iframe 的大小为 100% 看这里：

Make Iframe to fit 100% of container's remaining height

【讨论】：