时间戳

首页 > 解决方案 > 如何调整 iframe youtube 视频的界面大小？

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

问题描述

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

谢谢你。

标签： htmlcssiframevisual-studio-coderesize

解决方案

您必须使用响应式样式。为此，您需要一个额外的 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>

推荐阅读