html - 如何调整 iframe youtube 视频的界面大小？

Question

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

谢谢。

Answer 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>